CSS 选择器的优先级与 DOM 元素的层级位置没有任何关系。 body.foo{color: red; }html.foo{color: blue; } .foo的颜色是蓝色,虽然是的子元素,离.foo更近,但是选择器的优先级并不考虑 DOM 的位置,两段规则的优先级数值都是 11,所以渲染后面的html .foo的样式。 1.3. 增加 CSS 选择器优先级的小技巧 (...
id选择器和类选择器的优先级规则: CSS选择器的优先级由特异性(specificity)决定。特异性越高,优先级越高。 ID选择器的特异性高于类选择器。当两者应用于同一个元素时,ID选择器的样式将覆盖类选择器的样式。 确认id选择器比类选择器优先级高: 是的,id选择器确实比类选择器具有更高的优先级。这是CSS规范的...
ID选择器:以#开头的选择器,具有较高的特异性权重。 类选择器、属性选择器和伪类选择器:分别以.、[ ] 和:开头的选择器,它们拥有相同的特异性权重,但低于ID选择器。 (图片来源网络,侵删) 标签选择器和伪元素选择器:分别是简单的HTML标签选择器和使用::定义的选择器,它们的权重低于以上所有选择器。 **通用选择...
1. id选择器(#myid) 2. 类选择器(.myclassname) 3. 标签选择器(div,h1,p) 4. 相邻选择器(h1+p) 5. 子选择器(ul < li) 6. 后代选择器(li a) 7. 通配符选择器(*) 8. 属性选择器(a[rel="external"]) 9. 伪类选择器(a:hover,li:nth-child) 上面九种选择器中ID选择器的效率是最高,而伪...
ID:选择器中包含 ID 选择器则百位得一分。 类:选择器中包含类选择器、属性选择器或者伪类则十位得一分。 元素:选择器中包含元素、伪元素选择器则个位得一分。 例子: Tips: 伪类和伪元素的优先级不同,大部分伪类为0-1-0,伪元素则为0-0-1 总结: ...
0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等,这些伪类本身并不影响CSS优先级,影响优先级的是括号里面的选择器。 :not() {} 1. 1级——标签选择器 2级——类选择器、属性选择器和伪类 3级——ID选择器
ID 选择器, 如 #id{} 类选择器, 如 .class{} 属性选择器, 如 a[href="segmentfault.com"]{} 伪类选择器, 如 :hover{} 伪元素选择器, 如 ::before{} 标签选择器, 如 span{} 通配选择器, 如 *{} CSS 优先规则3:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 ...
ID选择器（ID Selectors）：通过元素的id属性选择元素（例如：#myElement）。ID选择器具有比类选择器和标签选择器更高的优先级。类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）：通过类名、属性或伪类选择元素（例如：.myClass、[type="text"]、:hover）。
每个ID选择器增加 (0,1,0,0)。 每个类选择器、属性选择器或伪类增加 (0,0,1,0)。 每个类型选择器或伪元素增加 (0,0,0,1)。 样式声明中!important的作用: 声明中加上 !important 会覆盖上述任何具体性计算结果,迫使样式优先应用。 继承和默认优先级: ...