CSS3基础理解和学习强大的CSS属性选择器大全

理解和学习强大的CSS属性选择器大全

我们在html代码里,经常通过id属性或class属性对同一个标签(如div)进行区分,在CSS里,我们可以使用属性选择器完成灵活的定义,关于属性选择器有下面这些定义方式(attribute,中文翻译为属性):

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

我们通过简单的示例来理解它们的含义:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[target] {color:red;}
</style>
</head>
<body>
<a href="#">Google</a>
<a title="yahoo" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
</body>
</html>

浏览这个网页,我们看到第一个链接文字是默认的蓝色,后两个链接的颜色为红色,因为后两个链接设置了target属性,而我们使用属性选择器定义了含有target属性的链接颜色。

属性选择器1.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title="like"] {color:red;}
</style>
</head>
<body>
<a href="#">Google</a>
<a title="like" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
<a title="like" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现设置了title="like"属性的链接颜色显示为红色。

属性选择器2.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title~=love] {color:red;}
</style>
</head>
<body>
<a title="google love" href="#">Google</a>
<a title="i love you" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
<a title="love" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现title中含有"love"的链接显示为红色。

属性选择器3.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title|=love] {color:red;}
</style>
</head>
<body>
<a title="google love" href="#">Google</a>
<a title="love-yahoo" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
<a title="love-you" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现title属性值以love单词开头的链接显示为红色。

属性选择器4.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title^=i] {color:red;}
</style>
</head>
<body>
<a title="ipad" href="#">Google</a>
<a title="iphone" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
<a title="ipod" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现title属性值以i字母开头的链接显示为红色。

属性选择器5.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title$=e] {color:red;}
</style>
</head>
<body>
<a title="love" href="#">Google</a>
<a title="iphone" href="#" target="_self">Yohoo</a>
<a target="_blank" href="#">Bing</a>
<a title="ipod" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现title属性值以e字母结尾的链接显示为红色。

属性选择器6.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a[title*=s] {color:red;}
</style>
</head>
<body>
<a title="loveshe" href="#">Google</a>
<a title="she is mine" href="#" target="_self">Yohoo</a>
<a title="iphone7s" target="_blank" href="#">Bing</a>
<a title="boys and girls" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现title属性中包含字母s的链接均显示为红色。

属性选择器7.png

通过这几个简单的例子,我们初步了解了这几个属性选择器的区别,属性选择器的用途很广泛,比如:

对所有带有alt属性的图片加上边框:

img[alt] {border: 2px solid red;}

把所有指向Google的链接变成绿色:

a[href="http://www.google.com"] {color: green;}

属性选择器可以同时选择多个属性,例如:

img[alt][title] {width:100%;}
a[href="http://www.google.com"][title="google"] {font-weight:bold;}

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/33.html