CSS選擇器型別
阿新 • • 發佈：2018-12-26
關係選擇器
包含選擇符（E F）
選擇所有被E元素包含的F元素，中間用空格隔開
<head> <style> ul li{color:red;} </style> </head> <ul> <li>12</li> <li>12</li> <li>12</li> <li>12</li> </ul> <ol> <li>33</li> <li>33</li> <li>33</li> <li>33</li> </ol>
子選擇符（E>F）
選擇所有作為E元素的直接子元素F，對更深一層的元素不起作用，用大於號表示。
<style>
p>a{color:red;}
</style>
<div>
<a href="#">子元素</a>
<p><a href="#">子孫元素</a></p>
<span><a href="#">猜猜看</a></span>
</div>
相鄰選擇符 （E+F）
選擇緊貼在E元素之後的F元素，用+號表示，選擇相鄰的第一個兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p+span{color:red;} </style> </head> <body> <p>這是一個p標籤</p> <span>這是緊挨著p元素的第一個</span> <span>這是第二個</span> </body> </html>
兄弟選擇符（E~F）
選擇E元素之後的所有F元素，作用於多個元素，用~隔開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p~span{color:red;}
</style>
</head>
<body>
<p>這是一個p標籤</p>
<span>這是緊挨著p元素的第一個</span>
<span>這是第二個</span>
</body>
</html>
屬性選擇器
1.E[att]
選擇具有attr屬性的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
option[disabled]{color:red;}
</style>
</head>
<body>
<select name="交通工具" id="老司機">
<option value="0">汽車</option>
<option value="1" disabled>火車</option>
<option value="2">飛機</option>
<option value="3">輪船</option>
</select>
</body>
</html>
2.E[att=”val”]
選擇具有att屬性且屬性值等於val的E元素
他不僅要符合屬性，值也要符合才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{color:red;height: 100px;}
</style>
</head>
<body>
<form action="">
<input type="text">
<input type="password">
<input type="radio">
<input type="submit">
</form>
</body>
</html>
3.E[att~=”val”]
選擇有att屬性的元素，且屬性值列表中有一個符合val的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[class~="p1"]{color:red;}
</style>
</head>
<body>
<p class="p1 pMore">隨便寫寫</p>
<p class="pMore">隨便寫寫</p>
<p class="p2 pMore">隨便寫寫</p>
<p class="p3 pMore">隨便寫寫</p>
<p class="pMore p1">隨便寫寫</p>
</body>
</html>
4.E[att^=”val”]
選擇E元素中，有att屬性，且以“val”開頭的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[class^="p"]{color:red;}
</style>
</head>
<body>
<p class="p1 pMore">隨便寫寫</p>
<p class="More">隨便寫寫</p>
<p class="p2 pMore">隨便寫寫</p>
<p class="3 pMore">隨便寫寫</p>
<p class="pMore p1">隨便寫寫</p>
</body>
</html>
5.E[att$=”val”]
選擇E元素中，有att屬性，，且以“val”結尾的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[class$="p"]{color:red;}
</style>
</head>
<body>
<p class="p1 pMore">隨便寫寫</p>
<p class="More">隨便寫寫</p>
<p class="p2 pMore">隨便寫寫</p>
<p class="3 pMorep">隨便寫寫</p>
<p class="pMore p1">隨便寫寫</p>
</body>
</html>
5.E[att*=”val”]
選擇具有att屬性幷包含“val”的字串的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a[href*="jd"]{color:yellow;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">京東</a>
<a href="http://www.taobao.com">淘寶</a>
</body>
</html>
偽類選擇器
通過冒號來定義，定義了元素的狀態，如點選按下，點選完成等等 。我們之前都是直接操作元素的樣式。現在可以為元素的狀態改變樣式，是元素看上去更“動態”。
1.E：link
設定超連結a在未被訪問前的樣式（特指a標籤）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{color:red;}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
2.E：visited
設定超連結a在連結已被訪問過時的樣式（特指a標籤）
a:visited{color:aqua;}
3.E：hover
滑鼠懸停在元素上時的樣式。不限於a標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{display: inline-block;
list-style: none;
width: 100px;
height: 40px;
text-align: center;
font-size: 16px;
font-family: "Microsoft YaHei UI";
line-height: 40px;
}
ul li:hover{background-color: #ff4400;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>第二頁</li>
<li>第三頁</li>
<li>第四頁</li>
<li>第五頁</li>
</ul>
</body>
</html>
4.E：active
設定元素在滑鼠按下時的樣式（不限於a標籤）
ul li:active{color: aqua;}
5.E：not(s)
匹配不含有s選擇器的元素E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:not(#div2){color: aquamarine;}
div:not(.d2){color:aqua;}
</style>
</head>
<body>
<div class="d1">塊元素</div>
<div class="d1">塊元素</div>
<div class="d1">塊元素</div>
<div class="d2 d1">塊元素</div>
<div class="d3" id="div2">塊元素</div>
</body>
</html>
6.E:first-child
本身具有父元素，且是子元素的第一個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:first-child{color: #ff4400;}
</style>
</head>
<body>
<ul>
<h2>標題</h2>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
</body>
</html>
7.E:last-child
本身具有父元素，且是父元素裡面的最後一個。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:last-child{color: #ff4400;}
</style>
</head>
<body>
<ul>
<h2>標題</h2>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
</body>
</html>
8.E:only-child
E元素是唯一的子元素時被匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ol:only-child{color: #ff4400;}
</style>
</head>
<body>
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
</body>
</html>