你应该知道的30个css选择器

2020-05-08 08:53:54易采站长站整理

此外,我们也有:visited伪类选择符,正如你期望的,允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。

查看例子

兼容性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

7. X + Y



ul + p {
color: red;
}

这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子,仅每一个ul之后的第一个段落元素的文本为红色。

查看例子

兼容性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

8. X > Y



div#container > ul {
border: 1px solid black;
}

X Y和X > Y之间的不同点是后者只选择直接子代。例如,考虑如下的标记。


<div id=”container”>
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。

因此,使用子代选择符有性能上的优势。事实上,这同样适用于基于css选择器的javascript引擎。

查看例子

兼容性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

9. X ~ Y



ul ~ p {
color: red;
}

这是兄弟选择符和X + Y一样,然而,它没有约束。与相邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中更在ul后面的任何p元素。

查看例子

兼容性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

10. X[title]



a[title] {
color: green;
}

被称为属性选择器,在我们上面的例子里,这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢?呵呵……

查看例子

兼容性

•IE7+
•Firefox
•Chrome
•Safari
•Opera

11. X[href=foo]



a[href=”http://net.tutsplus.com”] {
color: #1f6053; /* nettuts green */
}

上面的代码段将给所有href属性为http://net.tutsplus.com的锚标签添加样式;他们将会显示为我们的品牌绿色。所有其他的锚标签将不受影响。

注意我们将href值用引号包裹。记住,当使用javascript的css选择符引擎时也这么做。如果可能的话,尽可能使用css3选择符代替非官方的方法。