30个最常用的css选择器分析 作者：文章来源：css9.n et 点击数：835 更新时间：2011-7-31cs 你可能已经掌握了id、class、后台选择器等基本的css选择器。 但这还远非全部。 下面系统分析了CSS中最常用的30个选择器，其中包括我们最头疼的浏览器兼容性问题。 只有掌握了它们，你才能真正体会到CSS的巨大灵活性。 CS1。 以下是代码片段： * {: 0; padd ing: 0;} 星号选择器适用于页面上的每个元素。 网页设计者经常使用它来将页面中所有元素的宽度设置为 0。 * 选择器也可以用在子选择器中。 以下是代码片段： ★ * {: 1px Solid black;} 上面的代码将应用于该 id 元素的所有子元素。 这是相当耗时的。 除非必要，我不建议在页面中使用星号选择器，因为它的范围太大，并且会消耗相当多的浏览器资源。 兼容浏览器：IE6+,,,,Opera#X以下是代码片段：★ {width: 960px;: auto;}hash范围有对应id的元素。

id 是我们最常用的 CSS 选择器之一。 id选择器的优点是准确，优先级高（优先级基数为100，比class的10高很多）。 作为 hooks 的最佳选择，缺点也很明显：优先级太高，复用性差，所以在使用 id 选择器之前，我们最好问问自己，我们真的到了不该这么做的地步吗？不需要使用id选择器吗？ 兼容浏览器：IE6+、、、、、Opera.X 以下是代码片段： .error {color: red;} 这是一个类（class）选择器。 类选择器和 id 选择器之间的区别在于，类选择器可以作用于一组需要设置样式的元素。 兼容浏览器：IE6+,,,,Y以下是代码片段：li a {text- n: none;} 这也是我们最常用的选择器之一——后代选择器。 用于选择li下的子元素Y，li中的a都是下划线，但是li中还有一个ul。 我不希望 ul 下的 li 中的 a 带下划线。 使用此后代选择器时，请考虑是否希望将某种样式应用于所有后代元素。

该后代选择器的另一个功能是创建一个类似名称空间的函数。 比如上面代码风格的范围显然是li。 兼容浏览器：IE6+、、、、以下是代码片段： a { color: red; }ul { -左：0; } 标签选择器。 使用标签选择器对范围内的所有相应标签进行操作。 优先级仅高于兼容浏览器：IE6+、、、、：和链接标签。 :hover 伪类适用于单击的链接。 兼容浏览器：IE7+,,,,+Y以下是代码片段： ul + p {color: red;} 相邻选择器，上面的代码会匹配ul后面的第一个p，并替换段落中的文字颜色设置为红色。 （仅匹配第一个元素）兼容浏览器：IE7+,,,,>Y以下是代码片段：div#c > ul {: 1px Solid black;}

列表项目 列表项目 列表项目

子选择器。 与后代选择器 XY 不同，子选择器仅适用于 X 的直接子级 Y。在上面的 css 和 html 示例中，tai ner>ul 上的 div#c 仅适用于 er 中最新的 ul。 理论上来说，X > Y是一个值得提倡的选择器，但遗憾的是IE6不支持。 兼容浏览器：IE7+,,,,~Y以下为代码片段：ul~p {color: red;}相邻选择器，与前面提到的X+Y不同，X~Y匹配所有Y元素中与X同级的，而 X+Y 只匹配第一个。 兼容浏览器：IE7+,,,,,[title]以下是代码片段：a[title] {color: green;}属性选择器。 例如，上面的代码匹配带有标题属性的链接元素。 兼容浏览器：IE7+、、、、、[title="foo"]以下是代码片段：a[href=n]{color:#;}属性选择器。 上面的代码匹配所有具有 href 属性且 href 为 的链接。 这个功能很棒，但有些有限。

如果我们想要匹配 href 中包含的所有链接怎么办？ 看看下一个选择器。 兼容浏览器：IE7+、、、、、[title*=""]以下是代码片段：a[href*=""] {color:#;}属性选择器。 正如我们所希望的，上面的代码匹配所有在 href 中包含“”的链接。 兼容浏览器: IE7+,,,,,[hrefA="http"]以下是代码片段: a[hrefA="http"] { und: url(path/to//ic on.png) no- ;paddi ng-left: 10px;} 属性选择器。 上面的代码匹配href中所有以http开头的链接。 兼容浏览器：IE7+、、、、。 no-;paddi ng-left: 10px;属性选择器。

在属性选择器中使用 $ 来匹配以特定字符串结尾的元素。 上面的代码匹配的是所有带有jpg扩展名的图片的链接。 （注意这只是一张jpg图片，如果想应用到所有图片链接怎么办？见下一个选择器。） 兼容浏览器：IE7+,,,,[data-*="foo"] 工具提到了如何匹配所有图像链接。 如果使用“.p ng”]，a[href$=".gif"] { color: red;} 看起来很麻烦。 另一种解决方案是为所有图像链接添加特定属性，例如“数据文件”。 html 代码如下： 图片链接 下面是代码片段： 图片链接 css 代码如下： 下面是代码片段： a[data-=" image"] {color: red;} 这样所有图像链接的字体颜色都是红色。 兼容浏览器：IE7+,,,,[foo~="ba 属性选择器。属性选择器中的波浪号允许我们匹配属性值中以空格分隔的多个值之一。

看下面的例子： html 代码如下： 下面是代码片段： css 代码如下： 下面是代码片段： a[data-i nfo~="exter naF] {color: red ;}a[data-i nfo~="image "] {: black; 在上面的例子中，匹配的data-info属性中包含“的链接的字体颜色是红色。 匹配 data-info 属性中包含“image”的链接并设置黑色边框。 兼容浏览器：IE7+、、、、：伪类用于匹配处于选中状态的界面元素，如radio、。 以下是代码片段： in put[ type=radio]: {: black;} 上面的代码匹配所有处于选中状态的radio，并设置一个1px的黑色边框。 兼容浏览器：IE9+,,,:after 和 X: 伪类和组合用于在元素之前或之后附加内容。 我们看一个简单的例子： 下面是一个代码片段： h1:after { t:url(/i/logo.gif)} 上面的代码在 h1 中实现，在标题后面显示一张图片。

我们也经常用它来清除浮动，写法如下： 下面是一段代码片段：.:after { t:"";: block;clear: Both;: hidde n;fon t-size: 0;: 0; }。 {*: in line-block;: 1%;} - 当鼠标移到元素上时将设置元素的样式，而不是 text:hover 伪类。 上面的代码设置了div交叉时的背景颜色。 - 请注意，在 IE 6 中，:hover 只能用于链接元素。 让我分享一个经历。 设置链接滑动时，使用-使其看起来更美观。 代码如下： 下面是代码片段： a:hover {-: 1px Solid black;} 兼容浏览器：IE6+,,,,:not() 下面是代码片段： div: no t(#c ) {颜色：蓝色； 负伪类选择器用于在匹配元素时排除某些元素。

在上面的例子中，除了id为的div元素之外，将字体颜色设置为蓝色。 兼容浏览器：IE9+,,,,::::伪类用于给元素片段添加样式。 例如，第一个字母或段落的第一行。 需要注意的是，这个::伪类只能用于块元素。 以下代码设置段落中第一个字母的样式： 这是代码片段： p::first- {float: left;fon t-size: 2em;fon t-: bold;fon t-: ;paddi ng -right: 2px;} 下面的代码设置段落中第一行的样式： 下面是代码片段： p::first-line {fon t-:bold;font-size: 1.2em;} 兼容浏览器：IE6+ ,,,,Opera（IE6居然支持了，有点意外。） 用于设置序列元素（如li、tr）中第n个元素（从1开始数）的样式。

在上面的例子中，将第三个列表元素li的字体颜色设置为红色。 我们来看一下更灵活的用法。 在下面的示例中，设置偶数元素的样式，该样式可用于更改交替行上的颜色： 以下是代码片段： tr:nth-child(2n) { un d-color: grey; }兼容浏览器：IE9+,,,:nth-last-child(n) 代码片段如下： li:nth-last-child(2) {color: red;} 与 X:nth-child( 功能类似n) ，不同之处在于它从序列的最后一个元素开始。 在上面的例子中，设置了倒数第二个列表元素的字体颜色。 兼容浏览器：IE9+,,,,:nth-of-type(n) 代码片段如下： ul: nth-of-type (3) {: 1px Solid black; 与 X:nth-child(n) 类似，不同的是它不匹配序列元素，而是元素类型。 例如，上面的代码设置了页面上出现的第三个无序列表ul的边框。 兼容浏览器：IE9+,,,:nth-last-of-type(n) 代码片段如下： ul: nth-last-of-type (3) {: 1px Solid black;} 和 X:nth-of - type(n) 的功能类似，只是它从元素的最后一次出现开始计数。

在上面的例子中，倒数第二个无序列表的边框被设置为与浏览器兼容：IE9+,,,,:first-child:first-child伪类用于匹配序列的第一个元素。 我们经常用它来实现序列中第一个元素或最后一个元素的上（下）边框，如： 下面是代码片段： ul: nth-last-of-type (3) {: black;} 兼容浏览器：IE7+,,,,, :last-child 下面是代码片段： ul > li:last-child {-botto m:none;} 与 :first-child 类似，匹配最后一个序列中的元素。 兼容浏览器：IE9+,,,,:only-child 下面是代码片段： div p:o nly-child {color: red;} 这个伪类很少使用。 上面的例子中，匹配的是div下面只有一个p。 也就是说div中如果有多个ps的话是不会匹配的。 这是代码片段：

我的这里。

一共两个。

一共两个。

兼容浏览器：IE9+,,,,:only-of-type 下面是代码片段： li:o nly-of-type {fon t-:bold;} 它没有邻居元素。 例如上面的元素。 让我们看一个例子。 这个伪类匹配的是它的上层容器下只有一个子元素，并且没有邻居元素。 例如上面的元素。 让我们看一下仅将列表元素与一个列表项相匹配的示例代码。 兼容浏览器：IE9+,,,,, :first-of-type：first-of-type伪类与:nth-of-type(1)效果相同，匹配第一次出现：下面是代码片段：

我的这里。

在上面的html代码中，如果我们只想匹配List Item 2列表项，该怎么办： 下面是代码片段： ul:first-of-type > li: nth-child(2) {fon t-:大胆的; 情况1：以下是代码片段：p + ul li:last-child {fon t-:bold; 案例3：以下是代码片段： ul:first-of-type li: nth-last-child(1) { font t-:bold;} 兼容浏览器：IE9+,,,, Opera。 总结：如果你使用的是老版本的浏览器，比如IE 6，在使用上面的css选择器时一定要注意是否兼容。 然而，这不应该阻止我们学习使用它。 设计时可以参考浏览器兼容性列表，也可以使用脚本让旧浏览器支持它们。 还有一点，当我们使用类库的选择器时，比如我们应该尽可能的使用这些原生的CSS3选择器，因为类库的选择器引擎会通过浏览器内置来解析它们，这样会实现更快速度。