HTML連載22-序選擇器（下）

時間 2019-12-11

標籤 html 連載選擇器欄目 HTML 简体版

原文原文鏈接

1、子元素選擇器git

1.github

（1）選中標籤之中只有一個子元素的子元素，而且那個標籤必須使咱們格式中前面指定的標籤才行微信

（2）格式：學習

標籤：only-chirld{屬性：值；}

（3）舉例：大數據

        p:only-child{color:red;}

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

<p>我不是子元素</p>

<div>

    <p>我是有一個元素的那個p標籤</p>

</div>

<div>

    <h1>我是有兩個子元素的h1標籤</h1>

    <p>我是有兩個子元素的那個p標籤，做爲對比</p>

</div>

<div>

    <h1>我是有一個子元素的h1標籤</h1>

</div>

2.ui

（1）同級別中咱們指定的標籤中，只有這種類型一個的元素來指定格式spa

（2）格式.net

標籤：only-of-type{屬性：值；}

（3）舉例code

       p:only-of-type{color:blue;}

       <!--還用上面的代碼-->

3.視頻

（1）定義：同級別中全部標籤中規則的且爲指定標籤的設置屬性

（2）格式：

標籤：nth-chirld(規則){屬性：值：}

<!--其中「規則」可選：odd:奇數；even：偶數；xn+y,其中n是從0開始遞增的整數，支持咱們的公示-->

（3）例子：

   <style>

        p:nth-child(odd){

            color:red;

        }

</style>

<body>

<p>標籤1</p>

<p>標籤2</p>

<p>標籤3</p>

<p>標籤4</p>

<p>標籤5</p>

<p>標籤6</p>

（1）定義：同級別中全部指定標籤的且按規則選出的標籤設置屬性

（2）格式：

標籤：nth-of-type(規則):{屬性:值;}

<!--其中「規則」可選：odd:奇數；even：偶數；xn+y,其中n是從0開始遞增的整數，支持咱們的公示-->

（3）例子：

 

p:nth-of-type(even){color:red}

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

<h1>haode</h1>

<h1>haode</h1>

<h1>haode</h1>

<p>優秀1</p>

<p>優秀2</p>

<h1>haode</h1>

<p>優秀3</p>

<p>優秀4</p>