1、CSS属性选择器
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。注意是以单词为单位的，不能匹配单词的一半 | 2 |
| [attribute1=value] | [lang1=en] | 选择 lang 属性值以 "en" 开头的所有元素。竖线等号 注意是以单词为单位的后面紧跟连接符 | 2 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 a 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 a元素。 | 3 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 a 元素。 | 3 |
2、CSS2属性效果演示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS2属性选择器</title>
<style type="text/css">
[title~="hello"]{
color: red;
}
[title|="test"]{
border: 1px solid blue;
width: 100px;
}
</style>
</head>
<body>
<!--不能匹配单词的一部分-->
<div title="helloworld">helloworld</div>
<!--可以匹配-->
<div title="hello world">hello world</div>
<!--不能匹配单词的一部分-->
<div title="hello-world">hello-world</div>
<!--不能匹配-->
<div title="testinfo">testinfo</div>
<!--不能匹配-->
<div title="test info">test info</div>
<!--可以能匹配-->
<div title="test-info">test-info</div>
</body>
</html>
运行效果：
image.png
3、CSS3属性效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器</title>
<style type="text/css">
/*选择class属性以div开始的元素*/
[class^=div]{
width: 200px;
border: 1px solid red;
margin: 5px;
}
/*选择class属性以div开始的元素*/
[class$=div]{
border: 1px solid blue;
width: 300px;
}
/*选择class属性包含div字符的元素*/
[class*=div]{
color: red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="mydiv">myDiv</div>
<p class="divP">divP</p>
</body>
</html>
运行效果
image.png