CSS復合選擇器
- 后代選擇器
- 交集選擇器
- 并集選擇器
后代選擇器
在CSS選擇器中通過嵌套的方式，對特殊位置的HTML標簽進行宣告，外層的標簽寫在前面，內層的標簽寫在后面，之間用空格分隔，標簽嵌套時內層的標簽成為外層標簽的后代，
就是首先要符合外層標簽然后還符合內層標簽，這樣的就可以被后代選擇器修飾了
看樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div h3{
color: red;
}
</style>
</head>
<body>
<div>
<h3>水果</h3>
<ul>
<li>
<h3>串列中的h3</h3>
香蕉</li>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
<h3>手機品牌</h2>
<ul>
<li>華為</li>
<li>小米</li>
<li>蘋果</li>
<li>聯想</li>
<li>三星</li>
</ul>
</div>
<h3>div外面的h3標題</h3>
</body>
</html>
看下圖，首先紅色框 div 里的所有 h3 都會被上面的后代選擇器給修飾，所有在 div 范圍里的 h3 都會變成紅色，下面藍色框的 h3 ，由于不在 div 里面，所以不會被修飾，
運行效果：
所以這個很好理解吧，繼續往下看
交集選擇器
由兩個選擇器直接連接構成，選中二者各自元素范圍的交集 第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器，選擇器之間不能有空格，必須連續書寫，
看樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3.aa{
color: red;
}
h3#bb{
color: green;
}
</style>
</head>
<body>
<h3 class="aa">水果</h3>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
<h3>手機品牌</h2>
<ul>
<h3 class="aa">串列里的h3標題</h3>
<li>華為</li>
<li>小米</li>
<li>蘋果</li>
<li>聯想</li>
<li>三星</li>
</ul>
<div class="aa">class為aa但是不是h3標簽的情況</div>
<h3 id="bb">第二部分為id選擇器的情況</h3>
</body>
</html>
看下圖
紅色的框框就是第一部分是便簽選擇器第二部分是類選擇器的情況
綠色的框框就是第一部分是便簽選擇器第二部分是id選擇器的情況
紫色的框框雖然類是aa但是不是h3標簽，所以不會被修飾
運行效果：
這個也很好理解吧，就是交集，第一部分符合并且第二部分也符合就是可以被修飾的情況，顧名思義就是取交集，
并集選擇器
多個選擇器通過逗號連接而成，利用并集選擇器同時宣告風格相同樣式
并集，只要符合其中一種就會被修飾
看樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3,li{
color: red;
}
</style>
</head>
<body>
<h3>水果</h3>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
<h2>手機品牌</h2>
<ul>
<li>華為</li>
<li>小米</li>
<li>蘋果</li>
<li>聯想</li>
<li>三星</li>
</ul>
<h3>牛哄哄的柯南</h3>
</body>
</html>
h3,li{
color: red;
}
如下圖，所有的只要是 h3 或者是 li 的都會被修飾成紅色，
h2 不屬于其中的任意一種，所以不會被修飾
運行效果：
效果就是這樣，并集，只要是其中的一種就會被標記了，注意多個選擇器通過逗號連接而成 ，
寫作不易，看完如果對你有幫助，感謝點贊支持！
如果你是電腦端，右下角還有"一鍵三連"，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/197231.html
標籤：其他
上一篇：原生Javascript（語言基礎和流程控制陳述句）—1_Sander_2020的博客—CSDN博客
下一篇：簡單制作一個百度注冊頁面