Vue进阶(幺捌陆):CSS 属性选择器
导语
自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;}
这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:
<a href="https://shq5785.blog.csdn.net/" title="shq5785">W3School</a>
<a href="https://shq5785.blog.csdn.net/" title="CSS">CSS</a>
<a href="https://shq5785.blog.csdn.net/" title="HTML">HTML</a>
属性与属性值必须完全匹配
请注意,这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表,匹配就可能出问题。
请考虑一下的标记片段:
<p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]
,那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素,必须这样写:
p[class="important warning"] {color: red;}
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~
)。
假设您想选择 class
属性中包含 important
的元素,可以用下面这个选择器做到这一点:
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说,p.important
和 p[class="important"]
应用到 HTML
文档时是等价的。
那么,为什么还要有 “~=
” 属性选择器呢?因为它能用于任何属性,而不只是 class
。
例如,存在一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title
文档的部分属性选择器,只选择这些图片:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title
文本包含 “Figure” 的所有图像。没有 title 属性或者 title 属性中不包含 “Figure” 的图像都不会匹配。
子串匹配属性选择器
以上为基本的属性选择器介绍,下面介绍一个更高级的选择器模块,它是 CSS2
完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器,包括 IE7
。
下表是对这些选择器的简单总结:
类型 | 描述 |
---|---|
[abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
[abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
[abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
可以想到,这些选择有很多用途。
举例来说,如果希望对指向 https://shq5785.blog.csdn.net/所有链接应用样式,不必再为所有这些链接指定 class
,而只需编写以下规则:
a[href*="https://shq5785.blog.csdn.net/"] {color: red;}
特定属性选择类型
请看下面的例子:
*[lang|="en"] {color: red;}
上面的规则会选择 lang
属性等于 en
或以 en-
开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
一般来说,[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:
选择器 | 描述 |
---|---|
[attribute] |
用于选取带有指定属性的元素。 |
[attribute=value] |
用于选取带有指定属性和值的元素。 |
[attribute~=value] |
用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] |
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] |
匹配属性值以指定值开头的每个元素。 |
[attribute$=value] |
匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] |
匹配属性值中包含指定值的每个元素。 |
- 点赞
- 收藏
- 关注作者
评论(0)