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
