HTML連載20-並集選擇器&兄弟選擇器

1、並集選擇器

1.做用：給全部的選擇器選中的標籤設置屬性。

2.格式：

 

選擇器1，選擇器2｛

      屬性：值；

｝

 

 

3.例如：

 

        .abc1,#abc2{

            color:red;

        }

.......省略代碼.......

<p class="abc1">並集1</p>

<p id="abc2">並集2</p>

 

 

4.注：支持多個標籤取並集，中間用逗號鏈接就行。上一節中交集選擇器也能夠取多個交集

2、兄弟選擇器

1.相鄰兄弟選擇器

（1）定義：給指定選擇器後面緊跟的那個選擇器選中的標籤設置屬性。

（2）格式：

 

標籤1+標籤2｛

                    屬性：值；

 

                    ｝

 

 

（3）例子：

 

        h1+p{

            color:red;

.......省略代碼.......

<h1>我是標題1</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<h1>我是標題2</h1>

<p>我是標題5</p>

<p>我是標題6</p>

<p>我是標題7</p>

 

（4）注意點：相鄰兄弟選擇器只能選中緊跟後面的那個標籤；

若是選擇多個，也就是多個選擇器用加號相鄰，則最後一個會生效，前提是按順序寫，別跳過標籤，例如

 

h1+p+p+p+a{

    color:red;

}

.......省略代碼.......

<h1>我是標題1</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

2.通用兄弟選擇器

（1）定義：給指定選擇器後面的全部選擇器選中的全部標籤設置屬性。

（2）格式：

 

選擇器1~選擇器2｛

    屬性：值；

｝

 

 

（3）舉例：

 

    h2~p{

            color:blue;

        }

.......省略代碼.......       

<h2>我是標題3</h2>

<a href="#">我來阻擋1</a>

<p>我是段落8</p>

<p>我是段落9</p>

<p>我是段落10</p>

<a href="#">我來阻擋2</a>

 

 

（4）注：後面的p標籤全都生效了，即便有其餘標籤阻擋也沒事

3、源碼：​

d75_union_selectord76_brother_selector

地址:

https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）

3.博客園：https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公衆號：傅里葉變換，後臺回覆「禮包」獲取Java大數據學習視頻禮包