这30个CSS选择器,你必须熟记(中)

大家好,上一篇文章里,《这30个CSS选择器,你必须熟记(上)》,我们一起学习了常用的10个CSS选择器,这篇文章我们将继续学习CSS选择器,由于文章篇幅有限,再介绍10个常用常用的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个选择器,敬请期待...

下一篇
举报

扫码关注云+社区

领取腾讯云代金券