CSS基础4.3--选择器之属性选择器

开发技术 CSS

字数统计: 2.1k阅读时长: 9 min

 2018/08/08 

CSS3在CSS2的基础上新增加了3个属性选择器，如：E[attr^="value"]、E[attr$="value"]、E[attr*="value"]。与已定义的四个属性选择器为一体。

选择器之属性选择器

一.基础概念：

css属性选择器，顾名思义，是根据元素属性及属性值来选择元素的。举一个简单的例子：例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器示例</title>
<style type="text/css">
[title]
{
	color: blue;
}
[id="red"]
{
	color: red;
}
</style>
</head>

<body>
<p title="">不写属性值也可以做标识</p>
<p id="red">写上也可以</p>
</body>
</html>

效果示例图：

应注意，设置的识别属性值必须与要匹配的属性值相同，否则无效。如将例1中style标签内，id值设为blue,其结果为：

二.属性过滤器

注释：E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不能省略；attr表示HTML属性名；value表示HTML属性值，或者HTML属性值包含的子字符串。

E[attr]: 只使用了属性名(如例1中title就没有属性值)，但是没有任何确定的属性值。
E[attr="value"]: 指定了属性名，并指定了该属性的属性值。(如例1中的id属性)

E[attr~="value"]: 指定了属性名，并且具有属性值，此属性值为一个词列表，且以空格隔开，其中词列表已包含一个value词，~一定不能漏。如以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E[attr~="value"]选择器</title>
<style type="text/css">
li[class~="css"]{color:blue;}      /*只要在属性值列表（属性值列表是用空格分隔的）中有value值即可匹配此元素*/
</style>
</head>
<body>
<ul>
    <li class="html">html</li>
    <li class="div css">DIV+CSS</li>
    <li class="js fenge css">Javascript</li>
    <li class="css-zhuanqu">Jquery</li>
</ul>
</body>
</html>

效果图：

E[attr^="value"]: 指定了属性名，且有对应属性值，属性值必须以value开头。
E[attr$="value"]: 指定了属性名，且有对应属性值，属性值必须以value结尾。
E[attr|="value"]: 指定了属性名，且对应属性值是value或以value-开头的属性值

三.一个实例

下面是书本中的一个不错的示例：结构块部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片灯箱</title>
<style type="text/css">
/*灯箱外框样式*/
.pic_box {border: solid 6px #bbb; position: relative; float: left;}
.pic_box img {width: 500px; border: solid 1px #fff;}
/*导航框样式*/
.nav {background: #999; border: 1px solid #ccc; padding: 4px 12px; float: left;
opacity: 0.6; position: absolute; bottom: 6px; right: 12px;}
/*导航按钮样式*/
.nav a {float: left; display: block; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-redius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; text-decoration: none;}
.nav a: hover {background: green; color: #fff} 
</style>
</head>

<body>
<div class="pic_box">
	<img src="1.jpg" />
    <div class="nav">
    	<a href="#1" class="links item first" title="w3cplus" target="_blank"
        id="first">1</a>
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
        <a href="#3" class="links" title="this is a link" lang="zh-cn">3</a>
        <a href="#4" class="links item" target="_blank" lang="zh-tw">4</a>
        <a href="#5" class="links item" title="zh-cn">5</a>
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the web site" lang="cn">7 </a>
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
        <a href="#9" class="links item" title="http://www.baidu.com">9</a>
        <a href="#10" class="links item last" id="last">10</a>
    </div>
</div>
</body>
</html>

效果预览图：

下面我们将对刚才的的属性选择器在其中的应用一一列出： 1. E[attr]: E[attr]属性选择器是CSS3属性选择器最简单的一种。选择某个属性且不论其属性值的话，就可以使用该选择器。如： .nav a[id] {background: blue; color: yellow; font-weight: bold;} 该代码会选择div.nav下所有带有id属性的a元素，并设置背景色为蓝色，前景色为黄色，字体加粗的样式。如果将其插入上例代码中，a标签下带属性id的只有1号和10号。效果预览图：

可以看到标号为1和10的按钮变为了背景为蓝色，颜色为黄色。这是单属性的使用也可以多个属性一起设置： .nav a[href][title] {background: yellow; color: green;} 该代码会设置div.nav下的所有带href和title属性的a标签背景色为黄色，前景色为绿色。效果预览图：可以看到除了4号和10号，其余都应用了样式。

E[attr="value"]: 与E[attr]类似，只不过是因为指定了属性值所以会缩小了选择范围。如：.nav a[id="first"] {background: blue; color: yellow; font-weight: bold} 代码中只有1号和10号a标签带有id属性，前者为"first", 后者为"last"，所以结果应当为1号设置为了背景色为蓝色，前景色为黄色。效果预览图：当然也可以多属性并排写，更加精确地选择： .nav a[href="#1"][title] {background: yellow; color: green;} 效果预览图： 注意：使用该选择器时一定要注意，属性值应与要设置的属性值匹配，不匹配则无法应用样式。
E[attr~="value"]: 该选择器与上一个类似，只不过又"缩小"了范围：上一个选择器要求属性值完全相同才能应用样式，而该选择器只要标签内含有该属性(即内容不完全相同)就可以应用该样式。如果:.nav a[title="website"] {background: blue; color: yellow;} 即使用了上一个选择器，结果是不会有任何应用的：但是如果：.nav a[title~="website"] {background: blue; color: yellow;} 就增大了选择范围，只要title属性值里含有website这个词就可以应用：
E[attr^="value"]: 这个可以理解为上一个选择器对结果进行了筛选，只有属性值开头为"value"值的标签才会应用样式。如：.nav a[lang^="zh"] {background: blue; color: yellow;} 该代码会让a标签内lang属性值开头为zh的应用样式：
E[attr$="value"]: 这个不多说了，与上面相同，只不过是匹配属性值结尾为"value"的标签。如：`.nav a[lang$="zh"] {background: blue; color: yellow;}`
E[attr*="value"]: 该选择器会选择指定属性值含有"value"子串的标签。如：.nav a[title*="site"] {background: blue; color: yellow;} 只要title属性里含有site这个字符串，就会应用样式：
E[attr|="value"]: 该属性选择器被称为特定属性选择器，它会选择attr属性值等于value或以value-开头(注意是有一个-的)的标签。如：.nav a[lang|="zh"]{background: blue; color: yellow;}

小结：

在这七种选择器中，最实用的是E[attr="value"]和E[attr*="value"]。前者能定位许多不同类型的元素，特别是表单的操作，如：input[type="text"]、input[type="checkbox"]等，后者则能在网站中帮助匹配不同类型的文件，提高用户体验感(比如给.jpg, .gif等文件配上不同的图标)。

原文作者：f10@t

原文链接：https://lzwgiter.github.io/posts/d4db3e56.html

发表日期：August 8th 2018, 9:00:20 am

更新日期：August 25th 2021, 7:24:22 pm

Next Post

Bugku的一道misc-----猫片
Previous Post

CSS基础4.2--选择器之组合选择器

CATALOG

1. 选择器之属性选择器
2. 小结：