上一章在《CSS3基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。
从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种:
- E[attr]:只使用属性名,但没有确定任何属性值;
- E[attr="value"]:指定属性名,并指定了该属性的属性值;
- E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
- E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
- E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
- E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
- E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
为了更好的说明CSS3属性选择器的使用方法,我们把第一节的demo换成别的结构,如下所示:
<div class="demo clearfix">
<a href="http://www.itdriver.cn" target="_blank" class="links item first" id="first" title="实战互联网">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
<a href="mailto:694623250@qq.com" class="links item" title="website link" lang="zh">6</a>
<a href="" class="links item" title="open the website" lang="cn">7</a>
<a href="" class="links item" title="close the website" lang="en-zh">8</a>
<a href="" class="links item" title="http://www.sina.com">9</a>
<a href="" class="links item last" id="last">10</a>
</div>
初步美化一下上面的代码
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}
最初效果如下所示:
下面就开始针对上面列出的每个属性选择器来,具体分析其使用方法。
一、E[attr]
E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器,如:
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
上面代码所表示的,选择了div.demo下所有带有id属性的a元素,并在这个元素上使用背景色为兰色,前景色为黄色,字体加粗的样式,对照上面的html,我们不难发现,只有第一个和最后一个链接使用了id属性,所以选中了这两个a元素,效果如下所示:
上面是单一属性的使用,你也可以使用多属性进行选择元素,如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中:
.demo a[href][title] {background: yellow; color:green;}
不用我说,上面的代码大家都知道是什么意思了,他表示的是选择div.demo下的同时具有href,title两个属性的a元素,并且应用相对应的样式,如下所示:
IE6不支持这个选择器。
二、E[attr="value"]
E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属性值"value",这也是这两种选择器的最大区是之处。从而缩小了选择 围,更能精确选择自己需要的元素,在前面实例基础上我们进行一下简单的修改:
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
和前面代码相比较,此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素,并且这个元素有一个"id="first""属性值,请看下在的效果图:
E[attr="value"]属性选择器也可以多个属性并写,进一步缩小选择范围:
.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}
效果如下:
对于E[attr="value"]这种属性值选择器有一点需要注意:属性和属性值必须完全匹配,特别是对于属性值是词列表的形式时,如:
<a href="" class="links item" title="open the website">7</a>
例如上面的代码,如果你写成:
.demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/
上面的属性选择器并不会和上在的html匹配,因为他们的属性和属性值没有完全匹配,需要改成如下所示的代码,才能正确匹配:
.demo a[class="links item"]{color:red};/*这样才是匹配的,记得中间的空格不能少的哟*/
IE6浏览器不支持这种选择器。
三、E[attr~="value"]
如果你想根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],这种属性选择器是属性值是一个或多个词列表,如果是列表时,他们需要用空格隔开,只要属性值中有一个value相匹配就可以选中该元素,而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中,他们两者区别就是一个有“〜”号,一个没有“〜”号。我们来看一个这方面的实例:
.demo a[title~="website"]{background:orange;color:green;}
上面代码表示的是,div.demo下的a元素的title属性中,只要其属性值中含有"website"这个词就会被选择,回头看看我们的html,不难发现所有a元素中“2,6,7,8”这四个a元素的title中都含有,所以被选中,请看效果:
如果我们在上面的代码中,把那个“〜”号省去,大家看看他们不同之处:
.demo a[title="website"]{background:orange;color:green;}
这样将不会选择中任何元素,因为在所有a元素中无法找到完全匹配的"title='website'",换句话说就没有选中任何元素,效果如下:
这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别,和其中“〜”所取的作用,我总结了一句话:属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配。
IE6不支持E[attr~="value"]属性选择器。
四、E[attr^="value"]
E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,换句话说,选择的属性其以对应的属性值是以“value”开始的,一起来看个实例:
.demo a[href^="http://"]{background:orange;color:green;} .demo a[href^="mailto:"]{background:green;color:orange;}
上面代码表示的是选择了以href属性,并且以"http://"和"mailto:"开头的属性值的所有a元素,换过更简单一点的呢?只要a元素中的href属性值是以"http://"或"mailto:"开头的a元素都会以选中,那么下面大家请对照上面的html和下面的效果图,看看是不是那么一回事:
IE6不支持E[attr^="value"]选择器。
五、E[attr$="value"]
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素,换句话说就是选择元素attr属性,并且他的属性值是以value结尾的,这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现,如:
.demo a[href$="png"]{background:orange;color:green;}
上面代码表示的是,选择div.demo中元素有href属性,并以png值结尾的a元素。(正如上面所说,只不过这里使用的是改变元素的背景色),效果如下:
IE6不支持E[attr$="value"]属性选择器。
六、E[attr*="value"]
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说,只要你所选择的属性,其属性值中有这个"value"值都将被选中,如:
.demo a[title*="site"]{background:black;color:white;}
上面代码表示的是:选择了div.demo中a元素,而a元素的title属性中只要有"site"就符合选择条件。效果如下:
IE6不支持E[attr*="value"]选择器。
七、E[attr|="value"]
E[attr|="value"]是属性选择器中的最后一种,在说这个选择器使用之前先提醒大家attr后面的是一个竖线“|”而不是l,小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例:
.demo a[lang|="zh"]{background:gray;color:yellow;}
上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的所有a元素,大家可以对照前面的html代友,其中"2,3,4,6"被选中,因为他们都有一个lang属性,并且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果如下:
所以这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的,比如说你页面中有很多图片,图片文件名都是以"figure-1","figure-2"这样的方式来命名的,那么使用这种选择器选中图片就很方便了,大家可以在本地尝试一下,这种属性选择器最常常用的地方是如上面的示例用来匹配语言。
IE6不支持E[attr|="value"]选择器。
有关于属性选择器就上面这些内容了,属性选择器除了IE6不支持外,其他的浏览器都能支持,这样一来,如果你在你的页面上使用了属性选择器,而且你需要处理ie6兼容问题,那你就需要确保IE6用别的方法来实现或者你应该确保IE6用户将能获得一个可用的页面。七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的,其中E[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等,而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件,比如说你的网站上不同的文件类型的链接需要使用不同的icon图标,用来帮助你的网站提高用户体验,就像前面的实例,可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。
到这里,CSS3的属性选择器就介绍完了,下一节将主要介绍CSS3的伪类选择器,特别是其中的nth-child选择器,将是CSS3选择器中最有吸引力的一部分,大家如果感兴趣的话,请观注本站的有关更新吧。让我们一起期待CSS3的无穷力量。
感谢W3CPLUS提供精彩原文。
欢迎大家加入互联网技术交流群:62329335
相关推荐
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器,允许开发者根据HTML元素的属性值来选择元素。今天,我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器? --------------------- CSS属性...
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示,能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
在这些改进中,属性选择器得到了显著的提升,CSS3为属性选择器引入了新的匹配模式,使得我们可以更加灵活和细致地选择元素。 在CSS2中,属性选择器已经被支持,但其能力相对有限。CSS2的属性选择器支持以下几种模式...
**CSS选择器** 深入学习CSS,必须掌握各种选择器的用法,例如后代选择器(`div p`)、子元素选择器(`div > p`)、属性选择器(`[type="text"]`)和伪类(`:hover`、`:active`、`:focus`)。这些选择器能帮助精确地...
本文将深入探讨CSS选择器的几个主要类型,包括HTML标签选择器、类别(Class)选择器、专用ID选择器、选择器组合筛选、选择器集体声明、选择器的嵌套、子选择器以及属性选择器。 1. **HTML标签选择器**:这是一种最...
### CSS3 选择器详解 #### 一、概述 随着 Web 技术的不断发展,CSS3 带来了更为强大的选择器功能,极大地提升了网页设计的灵活性与效率。本篇文章将深入探讨 CSS3 选择器中的重要成员——`:nth` 选择器系列,并...
"CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于哪些HTML元素。选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星...
**jQuery 属性选择器详解** 在前端开发中,jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作,其中包括选择元素。属性选择器是 jQuery 提供的一种高级选择器,用于根据元素的属性及其值来定位和操作...
#### CSS选择器详解 ##### 通用选择器 通用选择器使用星号`*`表示,它可以匹配任何类型的元素。例如: ``` * { color: #000; } ``` 此示例将页面中所有元素的文字颜色设置为黑色。 ##### 标签选择器 标签选择器...
### Python爬虫之CSS选择器详解 #### 一、引言 在进行Web爬虫开发时,高效地从HTML文档中提取所需数据是一项基本而重要的技能。Python作为一门功能强大的编程语言,在网络爬虫领域有着广泛的应用。CSS选择器作为一...
### CSS选择器详解 在网页开发中,CSS(层叠样式表)被广泛应用于控制HTML文档的布局与外观。为了精确地对元素进行样式化,CSS提供了多种选择器,它们可以单独使用或组合使用,以满足不同的选择需求。本文将详细...
### CSS 选择器详解 #### 一、概述 CSS(层叠样式表)是一种用于描述网页文档结构化标记语言(如HTML或XML)外观和格式的语言。通过使用CSS选择器,我们可以精确地定位到HTML文档中的元素,并为其应用样式规则。...
### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...
《jQuery CSS和XPath选择器详解》 jQuery是一个广泛使用的JavaScript库,它的核心功能之一就是强大的选择器引擎。这个引擎不仅支持CSS1-3的选择器语法,还兼容XPath选择器,并在此基础上进行了扩展,使得开发者能更...
CSS的基本结构由选择器和声明组成。选择器指向要应用样式的HTML元素,而声明则定义具体的样式规则。例如: ```css p { color: red; font-size: 16px; } ``` 在上述代码中,`p`是选择器,表示对所有段落应用样式,`...
#### CSS选择器的重点内容详解 **CSS(Cascading Style Sheets)**,即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS选择器则是用于匹配HTML文档中的元素和它们的属性。通过选择器,我们可以为...
CSS3引入了更强大的选择器,如伪类(`:hover`, `:active`, `:focus`)和伪元素(`::before`, `::after`),以及属性选择器(`[attr=value]`)和类选择器(`.class`)的组合,让样式绑定更为精准。例如,我们可以...
避免使用过于复杂的布局,减少重绘和回流,使用适当的选择器,合理使用CSS动画,这些都可以提升页面加载速度和用户体验。 总结,CSS布局是构建网页的核心技能,掌握上述知识点能让你更好地驾驭网页设计,实现各种...
然后两个选择器相对应的CSS代码如下: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色: 尽管上面两个demo...