CSS选择器

来源：互联网发布：android 源码分析编辑：程序博客网时间：2024/05/07 05:36

1. css选择器

css中提供了多种选择器来让我们定位到自己想要的元素。具体如下表格：

模式含义及说明名称*匹配任意元素全局选择器E匹配任意E元素（即类型为E的元素）。元素选择器E F匹配是E元素后代的任意F元素。后代选择器E > F匹配是E元素子元素的任意F元素。与上者的区别在于，E F中F只要是E的后代就可以，但E > F中F必须是E的child子元素选择器E:first-child当元素E是其父元素的第一个子元素时，匹配E元素。伪类E:link
E:visited

当元素E是一个超连接的链时，如果目标还未被访问（:link），已经访问（:visited）时，匹配元素E。伪类E:hover
E:active
E:focus匹配特定用户行为：鼠标移到目标E上（:hover），用户按下鼠标到放开鼠标的这一段时间内（:active），一个元素获得焦点（:focus）。对于a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类E:lang(c)匹配E类型的元素，如果它以（人类）语言c写成（文档语言规定如何确定语言）。这个不太能理解，把w3school的例子copy过来

<html><head><style type="text/css">q:lang(no){quotes: "~" "~"}</style></head><body><p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p></body></html>

结果如下：

伪类E + F匹配任意F元素，如果紧接在前的是E元素，且E F拥有相同的父元素。相邻兄弟选择器E[foo]匹配任意E元素，如果它设置了"foo"属性（不管值是什么）。如果想引用一个元素的几个属性，可以将多个属性选择器链接在一起，写成例如E[foo][lang]，即匹配同时设置了foo和lang属性的元素。这种多重属性选择对以下3种模式同样适用。属性选择器E[foo="warning"]匹配任意E元素，如果它设置了"foo"属性，并且属性值为"warning"。属性选择器E[foo~="warning"]匹配任意E元素，如果它的"foo"属性值是一个以空格分割的列表，且其中之一为"warning"。例如[foo~="warning"]可以匹配foo值为“important warning"或是"warning not important"的元素。属性选择器E[abc^="def"]匹配任意E元素，如果它的"abc 属性值以 "def" 开头。属性选择器E[abc$="def"]匹配任意E元素，如果它的"abc 属性值以 "def" 结尾。属性选择器E[abc*="def"]匹配任意E元素，如果它的"abc 属性值包含"def"子串。属性选择器E[lang|="en"]匹配任意E元素，它的"lang"属性值是一个以连字号分割的列表，并且以"en"开头（从左到右算）。例如[lang|="en"]可以匹配lang值为"en"，"en-US"和"en-cockney"的元素，不能匹配”en US“和"enUS"。属性选择器E.warning仅对HTML适用。等于E[class~="warning"]。例如，.warning可以匹配class="important warning"和class="not important warning"。如果希望可以匹配以空格分割的class值列表中的多个，可以通过把两个类选择器链接在一起，来选择同时包含这些类名的元素，例如.important.warning只会匹配前者。类选择器E#myid匹配任何其ID为"myid"的E元素。ID类型属性的特殊之处在于，没有两个属性可以有相同的值。而且ID 属性不允许有以空格分隔的词列表。ID选择器

通过上述选择器的组合，我们可以得到一个链状的复杂的选择器。例如

html > body table#targetTB + ul {margin-top:20px;}

为了给某些选择器设置特殊效果，可以在上述链的最后使用如下伪元素：

:first-letter向文本的第一个字母添加特殊样式:first-line向文本的首行添加特殊样式。:before在元素之前添加内容。:after在元素之后添加内容。

例如:first-letter可以实现首字母大写且下沉的效果

<HTML> <HEAD>  <TITLE>Drop cap initial letter</TITLE>  <STYLE type="text/css">   P              { font-size: 12pt; width: 100pt;}   P:first-letter { font-size: 250%; font-style: italic;                    font-weight: bold; float: left }  </STYLE> </HEAD> <BODY>  <P>The first few words of an article    in The Economist.</P> </BODY></HTML>

为了使多个选择器分享相同的声明，我们可以给选择器分组，做法是用逗号将需要分组的选择器分开。在下面的例子对所有的标题元素进行了分组，使所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 { color: green;}

2. 选择器的特殊性

文档中同一个元素匹配到多条规则时，选择器的特殊性越大的规则将被优先采用。

一个选择器的特殊性是这样计算的：

如果该规则声明在元素的style属性里，计为1（计为a的值）
计算选择子中ID属性的数量（计为b的值）
计算选择子中其它属性和伪类的数量（计为c的值）
计算选择子中元素名和伪元素的数量（计为d的值）

以a-b-c-d的顺序将4个数字相连，即得到选择器的特殊性。css specification中的示例如下

因此，下述代码中的p元素内容会是红色的，因为元素style属性中的规则具有最大的优先级。

<HTML>  <HEAD>    <STYLE type="text/css">     #x97z { color: blue }    </STYLE>  </HEAD>  <BODY>    <P ID='x97z' style="color: red">p element</P>  </BODY></HTML>

0 0