大家好,上一篇文章里,《这30个CSS选择器,你必须熟记(上)》,我们一起学习了常用的10个CSS选择器,这篇文章我们将继续学习CSS选择器,由于文章篇幅有限,再介绍10个常用常用的CSS选择器。
上一小节,我们学习了 X[title] 这样的简单属性选择器,如果你想对属性的值进行精准匹配如何做呢,不用担心,CSS为我们提供了精准的属性选择器,比如我们想把特定网址的链接变成绿色,如下代码所示:
a[href="http://www.qianduandaren.com"] {
color: #1f6053; /* green */
}
浏览器兼容性:
有时候我们只需要匹配属性值的一部分,我们可以使用*号的语法,如下段代码所示:
a[href*="qianduandaren"] {
color: #1f6053; /* nettuts green */
}
上述代码,只有网址链接属性里含有qianduandaren这样值,链接文本的颜色替换成绿色。
浏览器兼容性:
你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗?使用这个选择器让你非常容易做到,如下段代码所示:
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
浏览器兼容性:
有匹配属性值开头的选择器,自然由匹配属性值结尾的选择器,比如我们将要匹配所有指向以jpg结尾的图片链接的文本为红色,要记住的是这些样式对gif和png结尾的图片链接是无效的。如下段代码所示:
a[href$=".jpg"] {
color: red;
}
浏览器兼容性:
我们来思考一个问题,拿上面的例子来说,我们要匹配所有指向图片链接的进行应用样式,我们该怎么做?图片的格式比较多,包括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;
}
浏览器兼容性:
这个技巧大多数人不会用,但是你使用后,一定会让你的小伙伴对你刮目相看的,波浪号可以选择带有空格的属性,接着上面的例子,比如我们的自定义属性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;
}
浏览器兼容性:
css单选按钮和复选按钮的默认样式很有限,如果我们想定义个性化的选择后的状态样式,可以使用选中状态选择器,示例代码如下:
input[type=radio]:checked {
border: 1px solid black;
}
是不是很简单,这个伪类可以用来定义选中(checked)的元素,比如单选按钮(radio)或多选按钮(checkbox)。
浏览器兼容性:
伪元素前置元素选择器::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>
浏览器兼容性:
这个选择器,用的频率也比较高,想必大家都清楚,正是的叫法应该是用户操作交互伪类:user action pseudo class,比如想给用户鼠标悬停的元素加上样式,你就可以使用此选择器:
小提示:在旧版的IE里,:hover只能用于链接标签。
最常见的交互效果就是,鼠标滑过,链接下面显示下划线:
a:hover {
border-bottom: 1px solid black;
}
小提示:border-bottom: 1px solid black;比text-decoration: underline;的效果更好。
浏览器兼容性:
前面我们学的都是肯定选择器,如果反过来就是否定选择器,选择不满足条件的元素,比如我们希望选中所有的div,除了一个 id 为 container 的div。我们使用这个选择器就能快速的选择。
div:not(#container) {
color: blue;
}
浏览器兼容性:
今天的内容就给大家介绍这里,感谢大家的阅读,下篇文章,我将继续和大家分享剩下的10个选择器,敬请期待...
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。