屬性選擇器
作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素。
語法：
- [屬性名] 選取含有指定屬性的元素
- [屬性名="屬性值"] 選取含有指定屬性值的元素
- [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
- [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
- [屬性名*="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
舉例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p[title] {
background-color: orange;
}
</style>
</head>
<body>
<!-- title屬性-->
<p title>我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
</body>
</html>
說明：
- title屬性：可以給任何標(biāo)簽指定。當(dāng)鼠標(biāo)移入到元素上時(shí)，元素中的title屬性值將會作為提示文字顯示。
結(jié)果：
為含有title屬性的元素設(shè)置背景顏色。
舉例2：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p[title^="ab"] {
background-color: orange;
}
</style>
</head>
<body>
<p title="abc">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
</body>
</html>
結(jié)果：為title屬性值中以'ab'開頭的元素設(shè)置背景顏色。
|
