復合選擇器
溫馨提示：建議自己嘗試運行代碼結合說明觀察規律
<!DOCTYPE html>
<html lang="cn">
<head>
<style>
p.a{
color: palegreen;
/* 這個是交集選擇器,選中的是class值為a的標簽并且標簽為p的標簽里面的內容 */
}
div.a{
font-size: 20px;
/* 這里是用交集選擇器改變div標簽里面class值為a的內容的字體樣式 */
}
font.b{
color: purple;
/* 這里是對應第32行代碼,只有這一個font標簽里面有b值 */
}
font.a{
font-size: 30px;
/* 這個是改變font標簽里面class值為a的標簽里面的內容的字體大小 */
}
h1{
color: red;
}
.ed{
color: red;
font-size: 25px;
}
/* ---------------------------------分割線------------------------------------ */
/* 我們來寫一個并集選擇器 */
p,font,div{
color: royalblue;
}
</style>
</head>
<body>
<h1>交集選擇器</h1>
<p class="a">交集選擇器作用:</p>
<p class="a">同時選擇符合多個條件的元素</p>
<p class="a">語法:</p>
<p class="a">選擇器1.選擇器2.選擇器3{ }</p>
<div class="a">為了體現效果,我這里用一個div標簽</div>
<font class="a">為了體現效果,我這里再用一個font標簽</font>
<div class="a c">這些標簽的class值都為a,如果這時使用類選擇器,這些標簽將全部被選中哦!</div>
<!-- 我們為上面這個div設定兩個class值 -->
<font class="a b">我們使用交集選擇器試一下</font>
<!-- 為這個font也設定里面class值 -->
<!-- 這些標簽都有一個共同點,class值為a -->
<p class="ed">大家最好自己運行代碼嘗試一下,看看區別在哪<br>說白了,這個交集選擇器,就是有兩個條件,同時滿足才發生改變</p>
<p>--------------------------------分割線-----------------------------------------------------------</p>
<p>說完了交集選擇器,那我們反著來,是不是有并集選擇器呢?</p>
<font>這個并集選擇器有什么用呢?你想想,如果你想對 不同的標簽 都改變它的元素</font>
<p>或者說啊,在一個選擇器里面,有多個條件,滿足其中一個條件,就執行css</p>
<p>比如,我這個元素是p,那個是div,還有一個元素是font,選擇器的條件是p,div,font,只要有一個滿足,就執行css</p>
<div>那么,很明顯,這三個標簽都符合條件,于是,這個頁面所有的p,div和font標簽,都執行了css</div>
<div>我們來實際操作一下啊</div>
<div>這樣,這個頁面所有的符合條件的標簽都變色了</div>
<!--
并集選擇器語法:
元素,元素,元素,{}
每個條件用,隔開
-->
</body>
</html>
代碼效果圖文對照圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/306282.html
標籤：其他
上一篇：一個陣列中只有兩個數字是出現一次，其他所有數字都出現了兩次
下一篇：（使用柔性陣列）動態版通訊錄