CSS选择符和可继承属性

news2024/11/24 20:53:38

属性选择符

  • 示例:a[target="_blank"] { text-decoration: none; }(选择所有target="_blank"<a>元素)
/* 选择所有具有class属性的h1元素 */  
h1[class] {  
  color: silver;  
}  
  
/* 选择所有具有href属性的a元素 */  
a[href] {  
  text-decoration: underline;  
}
/* 选择所有name属性值为"username"的input元素 */  
input[name="username"] {  
  border: 1px solid black;  
}  
  
/* 选择所有class属性值为"highlight"的元素 */  
.highlight, [class="highlight"] {  
  background-color: yellow;  
}
/* 选择所有class属性值中包含"row-"的div元素 */  
div[class*="row-"] {  
  border-bottom: 1px solid #ccc;  
}  
  
/* 选择所有id属性值以"nav-"开头的元素 */  
[id^="nav-"] {  
  color: navy;  
}

伪类选择符

  • 选择处于特定状态的元素。
  • :hover:用户悬停在元素上时。
  • :active:元素被用户激活时(如点击)。
  • :visited:用户已访问的链接。
  • :first-child:其父元素的第一个子元素。

伪元素选择符

  • 选择元素的特定部分或插入的内容
  • 示例:
    • ::before:在元素内容之前插入内容。
    • ::after:在元素内容之后插入内容。
    • ::first-line:选择元素的第一行。
    • ::first-letter:选择元素的第一个字母。
  • 组合选择符 h1, h2 { color: blue; }(选择所有<h1><h2>元素)
  • 后代选择符(空格分隔)div p { color: green; }(选择所有<div>元素内的<p>元素)
  • 子元素选择符>):div > p { color: purple; }所有直接位于<div>元素内的<p>元素)

子元素选择符使用>符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素

  • 相邻兄弟选择符+):div + p { margin-top: 20px; }紧接<div>元素后的<p>元素)
  • 一般兄弟选择符~h1 ~ p { font-size: 14px; }<h1>元素之后的所有<p>兄弟元素

可继承的属性

大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:

  • 字体及其相关属性font-familyfont-sizefont-weightfont-stylefont-variantfont-stretchfont-size-adjustfontline-height
  • 文本相关属性text-indenttext-aligntext-transformtext-decorationletter-spacingword-spacingwhite-spacevertical-align (对于内联元素和表格单元格), text-shadowdirectionunicode-bidi
  • 颜色相关属性coloropacity (注意,opacity继承会影响元素的透明度,但不会影响其颜色值本身)
  • 列表属性list-style-typelist-style-positionlist-style-imagelist-style
  • 表格布局属性border-collapseborder-spacingempty-cellscaption-side
  • 其他属性:cursorvisibilityspeak
不可继承的属性

大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:

  • 盒模型相关属性widthheightmarginpaddingborderdisplaypositionfloatcleartoprightbottomleftoverflowclipz-indexbox-sizingflexgrid 布局属性等
  • 背景和边框属性backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentborder-colorborder-styleborder-widthborder-radius 等
  • 其他与布局和外观相关的属性:opacity (当作为单独属性时,而非从color继承), visibility: collapse (对于表格行、行组、列和列组), contentcounter-resetcounter-incrementoutlinequotesvolumespeak-headerspeak-numeralspeak-punctuationvoice-familyvolumepitchpitch-rangestressrichnessazimuthelevation 等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1833194.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

116.网络游戏逆向分析与漏洞攻防-邮件系统数据分析-解析结构数据的创建信息

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

智谱AI GLM-4V-9B视觉大模型环境搭建推理

引子 最近在关注多模态大模型&#xff0c;之前4月份的时候关注过CogVLM&#xff08;CogVLM/CogAgent环境搭建&推理测试-CSDN博客&#xff09;。模型整体表现还不错&#xff0c;不过不支持中文。智谱AI刚刚开源了GLM-4大模型&#xff0c;套餐里面包含了GLM-4V-9B大模型&…

springboot+vue+mybatis酒店房间管理系统+PPT+论文+讲解+售后

随着现在网络的快速发展&#xff0c;网络的应用在各行各业当中它很快融入到了许多商家的眼球之中&#xff0c;他们利用网络来做这个电商的服务&#xff0c;随之就产生了“酒店房间管理系统”&#xff0c;这样就让人们酒店房间管理系统更加方便简单。 对于本酒店房间管理系统的…

本地localhost与目标地址跨域问题的解决方法

场景 开发过程中遇到一个控件&#xff0c;上传图片到某cdn&#xff0c;目标地址对localhost会有跨域问题&#xff1a; 解决方法 参照此博客&#xff0c;将本地地址定义为某网址&#xff0c;如abc&#xff1a; win10修改本地host文件&#xff0c;用以增加自定义本地访问域名12…

不做题,可以通过PMP考试吗?

如果你想要避免浪费3900元并且不想再支付2500元的补考费&#xff0c;我建议你多做一些PMP考试的练习题&#xff1b;如果你不在意这些费用&#xff0c;也可以选择资助我&#xff0c;嘿嘿。不做题的话&#xff0c;通过PMP考试的几率是非常小的。因为做题是检验我们学习成果并发现…

躬行践履始玉成,行而不辍终致远 | 中创算力季度优秀员工表彰大会

蓬勃发展&#xff0c;根基在人。在中创发展的道路上&#xff0c;有初心不改的领导者、有披星戴月的业务标杆、也有默默坚守的员工&#xff0c;他们扎根中创&#xff0c;用努力、拼搏、坚持&#xff0c;在中创的历程上镌刻下 属于自己的一份印记&#xff01; 为了表彰优秀&…

电商商品项目||电商竞品分析|主流电商商品API接口在竞品分析中的重要应用

竞争数据采集 竞争数据是对在电子商务业务中彼此存在竞争关系的商家、品牌、产品(即竞争对手&#xff09;等各项运营数据的总称&#xff0c;在电子商务企业的经营过程中&#xff0c;对竞争对手进行分析可以帮助决策者和管理员了解竞争对手的发展势头&#xff0c;为企业成略制定…

多尺度特征提取:原理、应用与挑战

多尺度 多尺度特征提取&#xff1a;原理、应用与挑战**原理****应用****挑战****总结** 多尺度特征提取&#xff1a;原理、应用与挑战 在计算机视觉、自然语言处理和信号处理等领域&#xff0c;有效地捕捉和解析数据的多种尺度特性是至关重要的。多尺度特征提取是一种技术&…

24年下半年安徽教资认定准确时间和流程

安徽教资认定准确时间 网上报名时间&#xff1a; 第一批次&#xff1a;4月8日至4月19日17时 第二批次&#xff1a;6月17日至6月28日17时 注意&#xff1a;符合安徽省申请条件的普通大中专院校2024届全日制毕业生&#xff0c;应统一选择6月17日至6月28日17时的时间段进行网上报名…

VM4.3 二次开发02 方案加载、执行及显示

效果 这是二次开发的第二个文章&#xff0c;所以不重复说明环境配置相关的内容。如果不懂的可以看本专栏的上一个文章。 海康视觉算法平台VisionMaster 4.3.0 C# 二次开发01 加载方案并获取结果-CSDN博客 界面代码 <Window x:Class"VmTestWpf.App.MainWindow"x…

浏览器必装插件推荐:最新版Simple Allow Copy,解除网页复制限制!

经常在网上找资料的朋友&#xff0c;尤其是学生党&#xff0c;总会遇到一个问题&#xff1a;很多资料网站的文字是禁止复制的。于是大家通常会使用各种文字识别软件来图文转换&#xff0c;或者直接手打。 今天这款小工具&#xff0c;可以轻松复制各种氪金网站上的任何文字&…

爆肝整理AI Agent:在企业应用中的6种基础类型

AI Agent智能体在企业应用中落地的价值、场景、成熟度做了分析&#xff0c;并且探讨了未来企业IT基础设施与架构如何为未来Gen AI&#xff08;生成式AI&#xff09;做好准备。在这样的架构中&#xff0c;我们把最终体现上层应用能力的AI Agent从不同的技术要求与原理上分成了几…

考试系统Spring Security的配置

设置Spring Security配置类 1、设置包括认证、授权方法 protected void configure(HttpSecurity http) throws Exception {http.headers().frameOptions().disable();List<String> securityIgnoreUrls systemConfig.getSecurityIgnoreUrls();String[] ignores new Str…

重生奇迹mu圣导师介绍

出生地&#xff1a;勇者大陆 性 别&#xff1a;男 擅 长&#xff1a;统率&宠物使用 转 职&#xff1a;祭师&#xff08;3转&#xff09; 介 绍&#xff1a;当玩家账号中有一个Lv250以上角色时&#xff0c;便可以创建职业为圣导师的新角色&#xff0c;圣导师每升一级获得…

Trying to access array offset on value of type null

主要原因是版本7.4以后PHP解析器会对null类型的下标访问直接报错 背景&#xff1a; laravel框架 同时使用了扩展A和扩展B 扩展A要求 php>7.4,同时扩展B的对null类型的下标访问不兼容php7.4 修改扩展B不太现实&#xff0c;毕竟扩展B中有太多的对null类型的下标访问。 解决…

6月17日(周一),AH 股行情总结

AI手机及苹果概念股全日走强&#xff0c;领益智造、山东精密等多股涨停&#xff0c;立讯精、歌尔股份涨逾6% 。新车型秦L销售预期提振股价&#xff0c;比亚迪涨超1% &#xff1b;航运、煤炭、地产板块下跌。 文章正文 周一&#xff0c;A股低开高走&#xff0c;上证指数收跌0.…

代码随想录算法训练营第二十六天|39. 组合总和、 40.组合总和II、 131.分割回文串

39. 组合总和 题目链接&#xff1a;39. 组合总和 文档讲解&#xff1a;代码随想录 状态&#xff1a;卡了一会儿 思路&#xff1a;先排序&#xff0c;方便剪枝。允许数字重复使用&#xff0c;因此递归调用时传入当前索引i。 题解&#xff1a; public class Solution {// 用于存…

ETAS AUTOSAR工具链的作用

一、AUTOSAR是什么&#xff1f; AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;是一个全球性的联盟&#xff0c;致力于制定和推广汽车电子系统的标准化解决方案。它是由汽车制造商、供应商和工程公司组成的合作伙伴网络&#xff0c;旨在解决汽车电子系统…

如何理解 Java 类加载器的工作原理及其使用场景

1. 简介 Java类加载器&#xff08;ClassLoader&#xff09;是Java运行时环境的一部分&#xff0c;负责动态加载Java类文件到Java虚拟机&#xff08;JVM&#xff09;中。类加载器是Java反射机制和动态特性的重要基础&#xff0c;为Java的跨平台和动态加载提供了支持。理解类加载…

ANSYS EMC解决方案与经典案例

EMC问题非常复杂&#xff0c;各行各业都会涉及&#xff0c;例如航空、航天、船舶、汽车、火车、高科技、物联网、消费电子。要考虑EMC的对象很多&#xff0c;包含整个系统、设备、PCB、线缆、电源、芯片封装。而且技术领域覆盖广&#xff0c;涉及高频问题、低频问题&#xff1b…