一段代碼學會CSS交集選擇器和並集選擇器


1、交集選擇器是and;
2、並集選擇器是or;
3、交集選擇器只能交2個,其中第1個是標記,第2個是類選擇器或者ID選擇器,之間不能有空格,形如:h2.special;
4、並集選擇器可多個,中間用“,”隔開;

下面的代碼演示了兩種選擇器的作用(實際運行效果見上圖)。

<!--以下為CSS代碼部分-->
<style type="">
/*一個並集選擇器*/
    h1,h2,h3,p{
    font-size:12px;
    color:green;
    }    
/*並集選擇器內依次有交集選擇器(h2.special)、類選擇器(special)、ID選擇器(#one)*/
    h2.special,.special,#one{
    text-decoration: underline;
    color: red;
    }
/*交集選擇器*/
    h2.special{
    color:blue;
    font-size: 30px
    }
</style>
<!--以下為html代碼部分-->
<body>
    <h2>示例文字000</h2><!--應用於上方的並集選擇器,綠字-->
    <h2 class="special">示例文字001</h2><!--應用於下方交集選擇器,交集選擇器和並集選擇器重復定義的內容,以交集選擇器為准,下划線,藍色大字,而不是紅色-->
    <p class="special">示例文字002</p><!--體現並集選擇器中的類選擇器,下划線,並集選擇器優先級低於類選擇器,所以不是綠字,是紅字-->
    <h4 id="one">示例文字003</h4><!--體現並集選擇器中的ID選擇器,下划線,紅字-->
    <h4>示例文字004</h4><!--參照組-->
</body>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM