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

時間 2019-12-11

標籤 html 連載元素選擇器交集欄目 HTML 简体版

原文原文鏈接

1、子元素選擇器git

1.定義：找到指定標籤中全部特定的直接子元素，而後設置屬性github

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）子元素選擇器之間須要用「>」符號相鏈接，並且不能有空格。ui

（3）子元素選擇器不單單能夠用標籤名稱，還能夠用其餘選擇器。如：用id選擇器或者classa選擇器。spa

        #id1>p{

            color:green;

        }

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

<div id="id1">

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

</div>

（4）子元素選擇器能夠用>符號一致延續下去。例如：.net

        div>ul>li>p{

            color:blue;

        }

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

  <div>

    <ul>

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

    </ul>

</div>

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

1.兩者區別

（1）

後代選擇器使用空格做爲鏈接符號

子元素選擇器使用>做爲鏈接符號

（2）後代選擇器會選中指定標籤，全部的特定後代標籤，也就是選中兒子/孫子...，只要是被放到指定標籤中的特定標籤都會選中（即不嚴格後代）

子元素標籤只會選中特定標籤中，全部的特定的直接標籤，也就是隻會選中特定的兒子標籤（嚴格後代）

2.兩者的共同點

（1）均可以使用標籤名稱，id名稱，class名稱

（2）均可以經過各自的鏈接符號一致延續下去

3.適用場景

經過不一樣點就能夠看出來了，或者他們的定義

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>