element that has no child elements

in the parent element,

must be the first child element in the parent element

element whose lang attribute value starts with "it"

in the parent element,

must be The last child element in the parent element

element

element

關(guān)鍵字：odd表示奇數(shù)，等同于:nth-child(2n)；even表示偶數(shù)，等同于:nth-child(2n+1)。

格式為(an+b)公式：a表示周期的長度（步長 ），n表示計數(shù)器（從 0 開始 ），而b則表示偏移值。

如下示例代碼展示了:nth-child(n)偽類(實現(xiàn)表格隔行換色效果)的用法：

nbsp;html>



????<meta>
????<meta>
????<meta>
????<title>nth-child偽類</title>
????<style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }

        th,
        td {
            border-top: 1px solid lightcoral;
            text-align: center;
        }

        /* 最后一行單元格在底部增加一個邊框效果 */
        tr:last-child td {
            border-bottom: 1px solid lightcoral;
        }

        /* 實現(xiàn)隔行換色 */
        tr:nth-child(even) {
            background-color: aquamarine;
        }
    </style>



????

代碼運行結(jié)果如下圖所示：

:nth-child(n)偽類的n參數(shù)用法中比較復(fù)雜的是使用(an+b)公式用法，如下示例列舉了一些公式用法：

<li>

:nth-child(5n)：定位元素的序號是5 [=5×1]、10 [=5×2]、15 [=5×3]等。

<li>

:nth-child(3n+4)：定位元素的序號是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。

<li>

:nth-child(-n+3)：定位元素的序號是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。

:nth-child(n)偽類與:nth-last-child(n)偽類和:nth-of-type(n)偽類與:nth-last-of-type(n)偽類的區(qū)別，類似于:first-of-type偽類與:last-of-type偽類和:first-child偽類與:last-child偽類的區(qū)別。

:empty

:empty偽類是用來定位沒有任何子級元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響:empty偽類定位元素的。

如下示例代碼展示了:empty偽類的用法：

nbsp;html>



????<meta>
????<meta>
????<meta>
????<title>empty偽類</title>
????<style>
        body {
            /* 開啟flex布局 */
            display: flex;
        }

        .box {
            background: pink;
            height: 80px;
            width: 80px;
            margin: 0 20px;
        }

        .box:empty {
            background: lime;
        }
    </style>



????<div></div>
????<div>這個元素的背景是粉色的</div>
????<div>
????????<!-- 這是一個注釋 -->
????</div>

代碼運行結(jié)果如下圖所示：

:root

CSS中的:root偽類選擇器比較簡單，它代表的就是元素。

如下代碼展示的:root偽類的用法：

:root?{
????height:?100vh;
????width:?100vw;
????background-color:?dodgerblue;
}

代碼運行結(jié)果如下圖所示：

3、UI元素狀態(tài)偽類選擇器

使用UI偽類選擇器可以根據(jù)元素的狀態(tài)匹配元素，下方列表將簡單總結(jié)這類選擇器：

4、輸入偽類選擇器

關(guān)于表單輸入的偽類，主要介紹三種常用的，具體如下：

<li>

:enabled和:disabled

<li>

:read-only和:read-write

<li>

:checked

:enabled和:disabled

:enabled和:disabled一這組偽類選擇器分別表示禁用狀態(tài)與可用狀態(tài)，這組為了使完全對立的。

:enabled偽類的實際用處并不大，因為大多元素默認都是可用的，所以寫不寫意義并不大。

如下代碼展示了:enabled和:disabled的用法：

nbsp;html>



??<meta>
??<meta>
??<meta>
??<title>:enabled和:disabled的用法</title>
??<style>
    input:enabled {
      outline: none;
    }

    input:disabled {
      /* 禁用狀態(tài)背景為灰色 */
      background-color: gray;
    }
  </style>



??<input>
??<input>

代碼運行結(jié)果如下所示：

由上圖我們看到禁用狀態(tài)的<input>的背景顏色為灰色。

:read-only和:read-write

:read-only和:read-write一這組偽類選擇器分別表示只讀和可寫狀態(tài)，同樣的:read-write也很雞肋，因為默認就是可讀寫，示例代碼如下所示：

nbsp;html>



??<meta>
??<meta>
??<meta>
??<title>:read-only和:read-write</title>
??<style>
    input:read-write {
      outline: none;
    }

    /* 只讀狀態(tài) */
    input:read-only {
      color: red;
      outline: none;
    }
  </style>



??<input>
??<input>

代碼運行結(jié)果如下所示：

我們可以看到，只讀的<input>的文字顏色為紅色。

:checked

:checked偽類可以說是眾多偽類選擇器中使用頻率很高的一個偽類選擇器，該選擇器表示選中的狀態(tài)，就比如下面這個例子：

nbsp;html>



??<meta>
??<meta>
??<meta>
??<title>checked偽類</title>
??<style>
    input:checked {
      /* 為選中的增加陰影 */
      box-shadow: 2px 2px 2px 2px lightcoral;
    }
  </style>



??<input>
??<input>

關(guān)于:checked偽類，最佳實踐是配合<label></label>元素來實現(xiàn)，現(xiàn)在我們就通過:checked和<label></label>元素來實現(xiàn)一個開關(guān)的效果。

示例代碼如下：

nbsp;html>



??<meta>
??<meta>
??<meta>
??<title>開關(guān)</title>
??<style>
    [type="checkbox"] {
      width: 44px;
      height: 26px;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* 開關(guān)樣式 */
    .cs-switch {
      display: inline-block;
      width: 44px;
      height: 26px;
      border: 2px solid;
      border-radius: 26px;
      background-color: currentColor;
      box-sizing: border-box;
      color: silver;
      transition: all .2s;
      cursor: pointer;
    }

    .cs-switch::before {
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fff;
      transition: margin-left .2s;
    }


    :checked+.cs-switch {
      color: blueviolet;
    }

    /* 選中移動 */
    :checked+.cs-switch::before {
      margin-left: 18px;
    }

    /* 禁用狀態(tài) */
    :disabled+.cs-switch {
      opacity: .4;
      cursor: not-allowed;
    }
  </style>



??<!-- 普通狀態(tài) -->
??<input>
??<label></label>
??<!-- 選中狀態(tài) -->
??<input>
??<label></label>
??<!-- 禁用狀態(tài) -->
??<input>
??<label></label>
??<!-- 選中禁用狀態(tài) -->
??<input>
??<label></label>

運行效果如下所示：

5、邏輯組合偽類

:not()否定的偽類

<li>

優(yōu)先級為0，優(yōu)先級由括號中的表達式?jīng)Q定； :not(p)由p決定

<li>

可以不斷的級聯(lián)；
input:not(:disabled):not(:read-only) {} ;表示處于不禁用，也不處于只讀的狀態(tài)

<li>

不可出現(xiàn)多個表達式，也不支持選擇符；
li:not(li, od); 尚未支持

:not()的巨大的用處在于告別重置的問題；

重置web中的樣式，就好比我們在項目中經(jīng)常使用到的：添加.active類名來控制樣式的顯示與隱藏/改變樣式，往常的寫法都是：

.cs_li?{
	display:?none;
}
.cs_li.active?{
	display:?block;
}

而我們可以使用:not()偽類，可以更好的實現(xiàn)：

.cs_li:not(.active)?{
	display:?none;
}

在列表中的設(shè)置<li>的邊框時也可使用其:not()

.cs_li:not(:nth-of-type(5n)){
	margin-right:?10px;?//?除5的倍數(shù)項都設(shè)置右邊的外邊距
}

:is()的作用是簡化選擇器

平時我們開發(fā)中經(jīng)常會用到類似下面的語法：

.cs_li_a?>?img,
.cs_li_b?>?img,
.cs_li_c?>?img?{
	display:?none;
}

使用:is()簡化可寫成：

:is(.cs_li_a,?.cs_li_b,?.cs_li_c)?>?img?{
	display:?none;
}

還有一種嵌套之間的關(guān)系，相互嵌套，交叉組合得出結(jié)論；如下方所示

ol?ol?li,
ol?ul?li,?
ul?ul?li,
ul?ol?li?{
	margin-left:?20px;
}

使用:is()偽類強化，則只需要幾行代碼：

:is(ol,?ul)?:is(ol,?ul)?li{
	margin-left:?20px;
}

<strong>:where()</strong>

:where()與上方的:is()相同，唯一不同的是級別永遠為0，也不受括號里面的表達式影響；

使用的方法與:is()完全相同，但優(yōu)先級永遠是0；底下的括號中的優(yōu)先級完全被忽略，倆句是同一個優(yōu)先級，并且級別等同于.conten選擇器

:where(.article,?section)?.conten?{}
:where(#article,?#section)?.conten?{

（學(xué)習(xí)視頻分享：web前端入門）