这30个CSS选择器，你必须熟记（中）

关注前端达人，与你共同进步

11、X[href="foo"]：精准属性值选择器

上一小节，我们学习了 X[title] 这样的简单属性选择器，如果你想对属性的值进行精准匹配如何做呢，不用担心，CSS为我们提供了精准的属性选择器，比如我们想把特定网址的链接变成绿色，如下代码所示：

a[href="http://www.qianduandaren.com"] {
color: #1f6053; /* green */
}

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

12、X[href*="xxx"]：匹配部分属性值选择器

有时候我们只需要匹配属性值的一部分，我们可以使用*号的语法，如下段代码所示：

a[href*="qianduandaren"] {
color: #1f6053; /* nettuts green */
}

上述代码，只有网址链接属性里含有qianduandaren这样值，链接文本的颜色替换成绿色。

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

13、X[href^="http"]：匹配属性值开头的选择器

你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗？使用这个选择器让你非常容易做到，如下段代码所示：

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

14、X[href$=".jpg"]：匹配属性值结尾的选择器

有匹配属性值开头的选择器，自然有匹配属性值结尾的选择器，比如我们将要匹配所有指向以jpg结尾的图片链接的文本为红色，要记住的是这些样式对gif和png结尾的图片链接是无效的。如下段代码所示：

a[href$=".jpg"] {
 color: red;
}

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

15、X[data-*="foo"]：自定义属性选择器

我们来思考一个问题，拿上面的例子来说，我们要匹配所有指向图片链接的进行应用样式，我们该怎么做？图片的格式比较多，包括Png,jpeg,jpg,gif等等，你也许会想到，这不简单，应用多个选择器不就行了，如下段代码所示：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

虽然实现了需求，你是否觉得很麻烦，要写多个，图片格式很多，万一写漏了怎么办呢？但是有一种解决方案，我们可以使用自定义属性，我们可以在图片的链接标签中添加data-filetype属性，如下所示：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

这样我们就可以使用精准属性值选择器进行匹配了，如下段代码所示：

a[data-filetype="image"] {
 color: red;
}

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

16、X[foo~="bar"]：匹配带有空格属性的值

这个技巧大多数人不会用，但是你使用后，一定会让你的小伙伴对你刮目相看的，波浪号可以选择带有空格的属性，接着上面的例子，比如我们的自定义属性data-info含有external，image 这两个值，并以空格隔开，html结构如下段代码所示：

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

接下来我们使用波浪号，进行选择其中的一个属性值，css代码如下：

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
 color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}

浏览器兼容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

17、X:checked：选中状态选择器

css单选按钮和复选按钮的默认样式很有限，如果我们想定义个性化的选择后的状态样式，可以使用选中状态选择器，示例代码如下：

input[type=radio]:checked {
 border: 1px solid black;
}

是不是很简单，这个伪类可以用来定义选中（checked）的元素，比如单选按钮（radio）或多选按钮（checkbox）。

浏览器兼容性：

• IE9+

• Firefox

• Chrome

• Safari

• Opera

18、X::after 后置内容元素选择器

伪元素前置元素选择器::before 和 后置内容元素选择器 :: after 属于CSS的高级用法，虽然看着简单，但是灵活用起来可不简单，几乎每天都会有人用这个两个属性做出创意的玩法，最简单的直接的用法，就是在某个元素结束前插入内容，如下段代码所示，在文档末尾加入结束语：

body::after {content: "The End"}

我们还会经常用这个属性清除浮动，算是很高频的用法啦，代码如下，建议收藏使用：

<style>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
}
</style>

<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>

浏览器兼容性：

• IE8+

• Firefox

• Chrome

• Safari

• Opera

19 X:hover 鼠标悬停状态选择器

这个选择器，用的频率也比较高，想必大家都清楚，正式的叫法应该是用户操作交互伪类：user action pseudo class，比如想给用户鼠标悬停的元素加上样式，你就可以使用此选择器：

小提示：在旧版的IE里，:hover只能用于链接标签。

最常见的交互效果就是，鼠标滑过，链接下面显示下划线：

a:hover {
 border-bottom: 1px solid black;
}

小提示：border-bottom: 1px solid black;比text-decoration: underline;的效果更好。

浏览器兼容性：

• IE6+ （只能用于链接标签）

• Firefox

• Chrome

• Safari

• Opera

20 X:not(selector) 否定伪类选择器

前面我们学的都是肯定选择器，如果反过来就是否定选择器，选择不满足条件的元素，比如我们希望选中所有的div,除了一个 id 为 container 的div。我们使用这个选择器就能快速的选择。

div:not(#container) {
 color: blue;
}

浏览器兼容性：

• IE9+

• Firefox

• Chrome

• Safari

• Opera

小节

今天的内容就给大家介绍这里，感谢大家的阅读，下篇文章，我将继续和大家分享剩下的10个选择器，敬请期待...

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"