CSS3 - 属性选择器
2019-03-14 本文已影响0人
Hyso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>段落</p>
<p class="a1c">段落1</p>
<p class="b1d">段落2</p>
<p class="a2d">段落3</p>
<p class="b2c">段落4</p>
</body>
</html>
选中所有带 class 属性的 p 标签
<style type="text/css">
p[class] {
color: red;
}
</style>
运行结果：
选中 class 属性的值为 'a1c' 的 p 标签
<style type="text/css">
p[class='a1c'] {
color: red;
}
</style>
运行结果：
选中 class 属性的值以 'a' 开头的 p 标签
<style type="text/css">
p[class^='a'] {
color: red;
}
</style>
运行结果：
选中 class 属性的值中包含 '1' 的 p 标签
<style type="text/css">
p[class*='1'] {
color: red;
}
</style>
运行结果：
选中 class 属性的值中包含 '2' 的 p 标签
<style type="text/css">
p[class*='2'] {
color: red;
}
</style>
运行结果：
选中 class 属性的值中以 'c' 结尾的 p 标签
<style type="text/css">
p[class$='c'] {
color: red;
}
</style>
运行结果：
