元素

元素

元素的元素

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

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

如下示例代碼展示了:nth-child(n)偽類(實(shí)現(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;
        }

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

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



????

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

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

<li>

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

<li>

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

<li>

:nth-child(-n+3)：定位元素的序號(hào)是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偽類是用來(lái)定位沒(méi)有任何子級(jí)元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響:empty偽類定位元素的。

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

nbsp;html>



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

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

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



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

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

:root

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

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

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

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

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

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

4、輸入偽類選擇器

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

<li>

:enabled和:disabled

<li>

:read-only和:read-write

<li>

:checked

:enabled和:disabled

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

:enabled偽類的實(shí)際用處并不大，因?yàn)榇蠖嘣啬J(rèn)都是可用的，所以寫(xiě)不寫(xiě)意義并不大。

如下代碼展示了: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>

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

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

:read-only和:read-write

:read-only和:read-write一這組偽類選擇器分別表示只讀和可寫(xiě)狀態(tài)，同樣的:read-write也很雞肋，因?yàn)槟J(rèn)就是可讀寫(xiě)，示例代碼如下所示：

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>

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

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

:checked

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

nbsp;html>



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



??<input>
??<input>

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

示例代碼如下：

nbsp;html>



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

    /* 開(kāi)關(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;
    }

    /* 選中移動(dòng) */
    :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>

運(yùn)行效果如下所示：

5、邏輯組合偽類

:not()否定的偽類

<li>

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

<li>

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

<li>

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

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

重置web中的樣式，就好比我們?cè)陧?xiàng)目中經(jīng)常使用到的：添加.active類名來(lái)控制樣式的顯示與隱藏/改變樣式，往常的寫(xiě)法都是：

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

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

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

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

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

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

平時(shí)我們開(kāi)發(fā)中經(jīng)常會(huì)用到類似下面的語(yǔ)法：

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

使用:is()簡(jiǎn)化可寫(xiě)成：

: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()偽類強(qiáng)化，則只需要幾行代碼：

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

<strong>:where()</strong>

:where()與上方的:is()相同，唯一不同的是級(jí)別永遠(yuǎn)為0，也不受括號(hào)里面的表達(dá)式影響；

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

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

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