属性选择器 (CSS 3)
属性选择器可以根据元素特定属性的来选择元素。
这样就可以不用借助于类或者id选择器。
选择符 | 简介 |
---|---|
E[att] | 选择具有 att 属性的 E 元素 |
E[att=“val”] | 选择具有 att 属性,且属性值等于 val 的 E 元素 |
E[att^=“val”] | 匹配具有 att 属性,且值以 val 开头的 E 元素 |
E[att$=“val”] | 匹配具有 att 属性,且值以 val 结尾的 E 元素 |
E[att*=“val”] | 匹配具有 att 属性,且值中含有 val 的 E 元素 |
E[att|=“val”] | 匹配具有 att 属性, 且值以以 val- 开头 (包括val) 的 E 元素 |
input[type=text] {
outline: none;
}
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
<style type="text/css">
div[name]{
background: pink;
}
</style>
<body>
<div name="hello">hello1</div>
<div>hello2</div>
</body>
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
<style type="text/css">
[name="hello"]{
background: pink;
}
</style>
[attr|=val] : 选择attr属性的值以val-开头(包括val)的元素
[attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
[name|="hello"]{
background: pink;
}
</style>
</head>
<body>
<div name="hello-1">a</div>
<div name="hello2">b</div>
<div name="hello-3 hello">c</div>
<div name="hello">d</div>
</body>
</html>
CSS3选择器规范地址: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范: https://www.w3.org/TR/selectors