1. 程式人生 > >HTML連載19-子元素選擇器&交集選擇器

HTML連載19-子元素選擇器&交集選擇器

一、子元素選擇器

1.定義:找到指定標籤中所有特定的直接子元素,然後設定屬性

2.格式:

 

標籤名稱一>標籤名稱2{

      屬性:值;

}

 

 

3.釋義:先找到叫做“標籤名稱1”的標籤,然後在這個標籤中查詢所有直接子元素名稱叫做“標籤名稱2”的元素

 

        div>p{

            color:red;

        }

.......省略程式碼.......       

<div>

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

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

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

    <ul>

        <li><p>我是段珞4</p></li>

    </ul>

</div>

 

 
      

4.注意

(1)子元素選擇器智慧查詢兒子,不會查詢孫子,重孫子等等

(2)子元素選擇器之間需要用“>”符號相連線,而且不能有空格。

(3)子元素選擇器不僅僅可以用標籤名稱,還可以用其他選擇器。如:用id選擇器或者classa選擇器。

 

        #id1>p{

            color:green;

        }

.......省略程式碼.......

<div id="id1">

    <p>我是帶id的那個測試</p>

</div>

(4)子元素選擇器可以用>符號一致延續下去。例如:

 

        div>ul>li>p{

            color:blue;

        }

  .......省略程式碼.......

  <div>

    <ul>

        <li><p>我是段珞4</p></li>

    </ul>

</div>

 

二、後代選擇器與子元素選擇期的區別和相同點以及企業開發中如何選擇

1.二者區別

(1)

後代選擇器使用空格作為連線符號

子元素選擇器使用>作為連線符號

(2)後代選擇器會選中指定標籤,所有的特定後代標籤,也就是選中兒子/孫子...,只要是被放到指定標籤中的特定標籤都會選中(即不嚴格後代)

子元素標籤只會選中特定標籤中,所有的特定的直接標籤,也就是隻會選中特定的兒子標籤(嚴格後代)

2.二者的共同點

(1)都可以使用標籤名稱,id名稱,class名稱

(2)都可以通過各自的連線符號一致延續下去

3.適用場景

通過不同點就可以看出來了,或者他們的定義

三、交集選擇器

 

1.定義:給所有選擇器選中的標籤中,相交的那部分標籤設定屬性

2.格式:

 

選擇器1選擇器2{

    屬性:值;

}

 

 

3.注意點:

(1)選擇器和選擇器之間沒有任何連線符號

(2)選擇器可以使用標籤名稱/id名稱/class名稱

 

    <style>

        p.abc1{

            color:red;

        }

        .abc2#open1{

            color: blue;

        }

</style>

</head>

<body>

<p class="abc2" id="open1">測試1</p>

<p class="abc1">測試2</p>

<p class="abc3">測試3</p>

</body>

 

(3)企業開發中很少使用,只做瞭解,用其他選擇器足以完成,不要這麼​複雜的結構。

四、原始碼:

d72_subelement_selector

d74_intersection_selecotr

地址:

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

2.CSDN:https://blog.csdn.net/weixin_44630050(心悅君兮君不知-睿)

3.部落格園:https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公眾號:傅立葉變換,後臺回覆“禮包”獲取Java大資料學習視訊禮包