概述
属性选择器通过 [] 来定义,[] 内部为元素的属性,属性选择器的权重要高于标签选择器
标准属性:id class type src href
自定义属性:data-
E[attr]只使用属性名,但没有确定任何属性值
E = Element元素
attr = 属性
属性 | 使用的方式 |
---|---|
E[attr=“value”] | 指定属性名,并指定了该属性的属性值 |
E[attr~=“value”] | 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 |
E[attr^=“value”] | 指定了属性名,并且有属性值,属性值是以value开头的 |
E[attr$=“value”] | 指定了属性名,并且有属性值,而且属性值是以value结束的 |
E[attr*=“value”] | 指定了属性名,并且有属性值,而且属值中包含了value |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
h3[data-user]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="1">1</div>
<p data-user="2">2</p>
<h3 data-user="3">3</h3>
<div data-user="4">4</div>
<div data-user="5">5</div>
<div data-user="6">6</div>
</body>
</html>
E[attr=“value”]
E[attr=“value”]指定属性名,并指定了该属性的属性值
加wx wzq85006194
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
加wx wzq85006194
-->
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-user="1"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="1">1</div>
<p data-user="2">2</p>
<h3 data-user="3">3</h3>
<div data-user="4">4</div>
<div data-user="5">5</div>
<div data-user="6">6</div>
</body>
</html>
E[attr~=“value”]
E[attr~=“value”]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 加wx wzq85006194
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
加wx wzq85006194
-->
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-type~="chi"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="123" data-type="chi shui coding">1</div>
<p data-user="234" data-type="shui coding">2</p>
<h3 data-user="345" data-type="coding">3</h3>
<div data-user="456" data-type="chi shui">4</div>
<div data-user="5" data-type="chi coding">5</div>
<div data-user="6" data-type="chi shui coding">6</div>
</body>
</html>
E[attr^=“value”]
E[attr^=“value”]指定了属性名,并且有属性值,属性值是以value开头的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-type^="sa"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="123" data-type="chi">1</div>
<p data-user="234" data-type="shui">2</p>
<h3 data-user="345" data-type="coding">3</h3>
<div data-user="456" data-type="chishui">4</div>
<div data-user="5" data-type="coding">5</div>
<div data-user="6" data-type="shuicoding">6</div>
</body>
</html>
E[attr$=“value”]
E[attr$=“value”]指定了属性名,并且有属性值,而且属性值是以value结束的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-type$="ing"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="123" data-type="chi">1</div>
<p data-user="234" data-type="shui">2</p>
<h3 data-user="345" data-type="coding">3</h3>
<div data-user="456" data-type="chishui">4</div>
<div data-user="5" data-type="coding">5</div>
<div data-user="6" data-type="shuicoding">6</div>
</body>
</html>
E[attr*=“value”]
E[attr*=“value”]指定了属性名,并且有属性值,而且属值中包含了value
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-type*="c"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="123" data-type="chi">1</div>
<p data-user="234" data-type="shui">2</p>
<h3 data-user="345" data-type="coding">3</h3>
<div data-user="456" data-type="chishui">4</div>
<div data-user="5" data-type="coding">5</div>
<div data-user="6" data-type="shuicoding">6</div>
</body>
</html>
E[attr|=“value”]
E[attr|=“value”]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn) 加wx wzq85006194
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
加wx wzq85006194
-->
<style>
div, p, h3{
height: 50px;
margin: 0 0 10px 0;
background-color: pink;
color: #fff;
font-size: 24px;
text-indent: 20px;
}
body [data-type|="chi"]{
background-color: palegreen;
}
</style>
</head>
<body>
<div data-user="123" data-type="chi-fan">1</div>
<p data-user="234" data-type="shui-jiao">2</p>
<h3 data-user="345" data-type="chicoding">3</h3>
<div data-user="456" data-type="chi-shui">4</div>
<div data-user="5" data-type="coding">5</div>
<div data-user="6" data-type="shui-coding">6</div>
</body>
</html>