这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个选择器，敬请期待...

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

长按关注"前端达人"