属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
根据属性及属性值来选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*包含title属性的元素都应用此样式*/
[title] {font-style: italic;}
/*包含href属性的a元素都应用此样式*/
a[href] {color: pink;}
/*包含href和title属性的a元素应用此样式*/
a[href][title] {color: red;}
/*指定属性值,且属性/值对需要严格相等，不可包含任何其他值*/
a[href="https://www.w3school.com.cn"]{font-size:40px;}
</style>
</head>
<body>
<p title="示例">仅有title属性</p>
<a href="https://www.bilibili.com">b站</a>
<br/>
<!--效果是保留了title的斜体，就近原则选择了红色而不是粉色-->
<a href="https://www.bilibili.com" title="b站">b站</a>
<br/>
<a href="https://www.w3school.com.cn">w3school</a>
</body>
</html>
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
例如：
p[title~="important"]{color:red;}
则以下两种方式都能应用样式：
<p title="important warning">This is a paragraph.</p>
<p title="important">This is a paragraph.</p>
这种选择器有个很好的应用：
如果文档中包含很多图片，这些图片title名分为A,B,C三类，每个图片有123···的编号如A 1,A 2，则可以用部分属性值选择器来给每一类设置样式。
子串匹配属性选择器
这个比根据部分属性值选择更牛，只需要子字符串匹配到就行了。这种属性选择器最常见的用途是匹配语言值。
拿上面图片编号的例子来说，图片title可以是A1,A2这样，没有空格也可以
另：[abc|="def"] 会选择abc属性等于def或以def开头的所有元素。
后记
- 选择器的内容挺多的，今天打卡选择了这个属性选择器发上来
- 已经打卡day9啦
扫一扫
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
