1. 程式人生 > >css交集選擇器、並集選擇器、兄弟選擇器

css交集選擇器、並集選擇器、兄弟選擇器

一,交集選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-css交集選擇器.html</title>
    <!--
        交集選擇器,相交的部分就是要設定屬性值的標籤
        1,格式:
        選擇器1選擇器2...{
            屬性:值;
        }
        2,注意點:
        (1),選擇器之間沒有任何的連線符號
        (2),選擇器可以是標籤名稱,也可以是id、class名稱
        (3),交集選擇器僅僅是瞭解
    -->
<style> p.para1{ color: red; } </style> </head> <body> <p>我是段落</p> <p>我是段落</p> <p class="para1">我是段落</p> <p class="para1">我是段落</p> <p>我是段落</p> </body> </html>

二,並集選擇器

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>16-css並集選擇器.html</title> <!-- 並集選擇器 1,格式: 選擇器1,選擇器2,...{ 屬性:值; } 2,注意點: (1),選擇器之間利用,連線 (2),選擇器可以是標籤名稱,也可以是id、class名稱 -->
<style> .ht,.para{ color: red; } </style> </head> <body> <h1 class="ht">我是頭</h1> <p class="para">我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </body> </html>

三,兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-css兄弟選擇器.html</title>
    <!--
        兄弟選擇器,只選中同級的標籤
        1,相鄰兄弟兄弟選擇(css2)
        格式:
        選擇器1+選擇器2{
            屬性:值;
        }
        注意點:
        (1),相鄰選擇器必須用+連結
        (2),相鄰選擇器只能選中緊跟後邊的那個標籤,不能選中被隔開的標籤

        2,通用兄弟選擇器(css3),指定選擇器後邊特定的所有選擇器都被選中
        格式:
        選擇器1~選擇器2{
            屬性:值;
        }
    -->
    <style>
        /*h1+p{*/
            /*color: red;*/
        /*}*/
        h1~p{
            color: red;
        }
    </style>
</head>
<body>
<!--<h1>我是標題</h1>-->
<!--<a href="#">我是超級連結</a>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<h1>我是標題</h1>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->
<!--<p>我是段落</p>-->

<h1>我是標題</h1>
<a href="#">我是超級連結</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是標題</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>