層級(jí)選擇器
目錄
選擇器結(jié)構(gòu)
層次結(jié)構(gòu)
- A與B、B1是父子級(jí)關(guān)系
- C11和C12與B是父子級(jí)關(guān)系，C2和B1是父子級(jí)關(guān)系
- B與B1是兄弟關(guān)系
- A與C11、C12和C2是后代關(guān)系，同樣B和B1也是A的后代關(guān)系
- C11與C12是兄弟關(guān)系但是同C2不是兄弟關(guān)系
后代選擇器
語(yǔ)法結(jié)構(gòu)
選擇器 選擇器的后代元素的后代節(jié)點(diǎn){
語(yǔ)法
}
使用空格分離
- 通過(guò)后代結(jié)構(gòu)器使A下面的所有后代都變色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
a .hahaha{
color:pink;
}
</style>
</head>
<body>
<a>這是大哥</p>
<b class="hahaha">這是小弟1號(hào)</p>
<c11 class="hahaha">
這是弟中弟1號(hào)</p>
</c11>
<c12 class="hahaha">
這是弟中弟2號(hào)</p>
</c12>
</b>
<b1 class="hahaha">這是小弟2號(hào)</p>
<c2 class="hahaha">
這是弟中弟3號(hào)</p>
</c2>
</b1>
</a>
</body>
</html>
- 代碼效果
效果圖
子級(jí)選擇器
語(yǔ)法結(jié)構(gòu)
選擇器>選擇器的后代元素的子級(jí)節(jié)點(diǎn){
語(yǔ)法
}
使用右尖括號(hào)>分離
- 示例 將小弟變成紅色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
a>.hahaha{
color:red;
}
</style>
</head>
<body>
<a>這是大哥</p>
<b class="hahaha">這是小弟1號(hào)</p>
<c11 class="hahaha">
這是弟中弟1號(hào)</p>
</c11>
<c12 class="hahaha">
這是弟中弟2號(hào)</p>
</c12>
</b>
<b1 class="hahaha">這是小弟2號(hào)</p>
<c2 class="hahaha">
這是弟中弟3號(hào)</p>
</c2>
</b1>
</a>
</body>
</html>
- 代碼效果
效果圖
弟中弟變色的原因是因?yàn)閏olor存在著繼承，所以才會(huì)變色
相鄰兄弟選擇器
語(yǔ)法結(jié)構(gòu)
選擇器+選擇器的相鄰元素的兄弟節(jié)點(diǎn){
語(yǔ)法
}
使用加號(hào)+分離
- 將弟中弟1號(hào)的相鄰兄弟變個(gè)色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
c11+.hahaha{
color:green;
}
</style>
</head>
<body>
<a>這是大哥</p>
<b class="hahaha">這是小弟1號(hào)</p>
<c11 class="hahaha">
這是弟中弟1號(hào)</p>
</c11>
<c11 class="hahaha">
這是弟中弟2號(hào)</p>
</c11>
<c11 class="hahaha1">
這是弟中弟4號(hào)</p>
</c11>
</b>
<b1 class="hahaha">這是小弟2號(hào)</p>
<c2 class="hahaha">
這是弟中弟3號(hào)</p>
</c2>
</b1>
</a>
</body>
</html>
- 代碼效果
效果圖
x'g
普通兄弟選擇器
語(yǔ)法結(jié)構(gòu)
選擇器~選擇器的相鄰元素的兄弟節(jié)點(diǎn){
語(yǔ)法
}
使用波浪號(hào)~分離
- 將弟中弟1號(hào)的兄弟變個(gè)色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>練習(xí)</title>
<style>
c11~c11{
color:blue;
}
</style>
</head>
<body>
<a>這是大哥</p>
<b class="hahaha">這是小弟1號(hào)</p>
<c11 class="hahaha">
這是弟中弟1號(hào)</p>
</c11>
<c11 class="hahaha">
這是弟中弟2號(hào)</p>
</c11>
<c11 class="hahaha1">
這是弟中弟4號(hào)</p>
</c11>
</b>
<b1 class="hahaha">這是小弟2號(hào)</p>
<c2 class="hahaha">
這是弟中弟3號(hào)</p>
</c2>
</b1>
</a>
</body>
</html>
- 代碼效果
效果圖
