NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

CSS后代选择器以及选择器特殊性

| Comments

常用的重要选择器规则:

element,element div,p 选择所有 div 元素和所有 p 元素。
element element div p 后代选择器:选择 div 元素内部的所有 p 元素。
element>element div>p 子选择器:选择父元素为 div 元素的所有 p 元素。
element+element div+p 第一个子元素选择器:选择紧接在 div 元素之后的所有 p 元素。

后代选择器

后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。 举例来说,如果你希望只对 h1 元素中的 em 元素应用样式,可以这样写:

1
h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

1
2
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”,但是要求必须从右向左读选择器。 因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

关于后代选择器有一个常被忽略的方面,即两个元素之间的层次间隔可以是无限的。例如,如果写作ul em,这个语法就会选择从u1元素继承的所有em元素,而无论em的嵌套层次有多深。

子选择器

某些情况下,可能并不想选择一个任意的后代元素,而是希望缩小范围,只选择另一个元素的子元素(不是所有后代元素)。可以使用子结合符,即大于号(>)

1
h1 > strong {color: red;}

特殊性

如果有多个选择器都满足同一个元素,即冲突了,怎么知道哪一个规则更强?

答案在于每个选择器的特殊性。对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加在规则中的各个声明。如果一个元素有两个或者多个冲突的属性声明,那么有最高特殊性的声明就会胜出。

选择器的特殊性由选择器本身的组件确定。特殊性表述为4个部分,0,0,0,0

1.对于选择器中给定的各个ID属性,加 0,1,0,0 2.对于选择器中给定的各个类元素,属性选择器或伪类,加 0,0,1,0 3.对于选择器中给定的各个元素和伪元素,加0,0,0,1 4.结合符和通配选择器对特殊性没有任何贡献

1
2
3
4
5
6
h1 {color: red;} 0,0,0,1
p em {color: purple;} 0,0,0,2
.grape {color: purple} 0,0,1,0
*.bright {color: yellow} 0,0,1,0
p.bright em.dark {color: maroon} 0,0,2,2
div#sidebar *[href] {color: silver} 0,1,1,1

第五条规则强于第二条

0011 > 0001 0101 > 0017

内联样式的特殊性 我们已经见过以0开头的特殊性,所以你可能会奇怪为什么会有这些特殊性。一般地,第一个0是为内联样式声明保留的,它比所有其他声明的特殊性都高,内联样式的特殊性是1,0,0,0

!important 重要性规则

有时某个声明可能非常重要,超过了所有其他声明。CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标识。

1
p.dark {color: #333 !important; background: white;}

必须正确地放置!important,否则声明将无效,它应该总是放在声明的最后,即分号之前。如果一个属性的值包含多个关键字,则必须放在最后一个关键词的后面,比如font:sss,sss !important;

标志位!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混肴。类似的,非重要声明也归为一组,使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。

1.《css权威指南》

Comments