CSS 属性选择器讲解

网友投稿 752 2022-05-29

一、导语

自CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。

二、简单属性选择器

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

下面的例子是把包含标题(title)的所有元素变为蓝色:

[title] { color:blue; }

如果希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

a[href] {color:red;}

此外,还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

三、属性和值选择器

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="https://shq5785.blog.csdn.net/"] {color: red;}

四、属性和值的选择器 - 多值

与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="https://shq5785.blog.csdn.net/"][title="CSS3"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

W3School CSS HTML

4.1 属性与属性值必须完全匹配

请注意,这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表,匹配就可能出问题。

请考虑一下的标记片段:

This paragraph is a very important warning.

如果写成 p[class="important"],那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素,必须这样写:

p[class="important warning"] {color: red;}

4.2 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

p[class~="important"] {color: red;}

如果忽略了波浪号,则说明需要完成完全值匹配。

4.3 部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么,为什么还要有 “~=” 属性选择器呢?因为它能用于任何属性,而不只是 class。

例如,存在一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 “Figure” 的所有图像。没有 title 属性或者 title 属性中不包含 “Figure” 的图像都不会匹配。

五、子串匹配属性选择器

CSS 属性选择器讲解

以上为基本的属性选择器介绍,下面介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器,包括 IE7。

下表是对这些选择器的简单总结:

可以想到,这些选择有很多用途。

举例来说,如果希望对指向 https://shq5785.blog.csdn.net/所有链接应用样式,不必再为所有这些链接指定 class,而只需编写以下规则:

a[href*="https://shq5785.blog.csdn.net/"] {color: red;}

六、特定属性选择类型

请看下面的例子:

*[lang|="en"] {color: red;}

上面的规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

Hello!

Greetings!

G'day!

Bonjour!

Jrooana!

一般来说,[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像:

img[src|="figure"] {border: 1px solid gray;}

七、表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }

注1:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。

注2: 基本选择器(标签、id、class)的优先级

style > id选择器 > class选择器 > 标签选择器

注3:

CSS HTML

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【软通鲲鹏云最佳实践43】quartz-2.3.1 鲲鹏云服务器安装实践
下一篇:使用xpath爬取数据
相关文章