<th id="mffed"><video id="mffed"></video></th>
<pre id="mffed"></pre>
    <th id="mffed"><sup id="mffed"></sup></th>
  1. <th id="mffed"><video id="mffed"></video></th>
    <th id="mffed"><video id="mffed"></video></th>
  2. 帶你了解CSS偽類選擇器的新奇體驗

    W3cschool小編 2023-03-02 11:45:35 瀏覽數 (1790)
    反饋

    CSS 偽類是用來添加一些選擇器的特殊效果。由于狀態的變化是非靜態的,所以元素達到一個特定狀態時,它可能得到一個偽類的樣式;當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和 class 有些類似,但它是基于文檔之外的抽象,所以叫偽類。當然偽類針對不同瀏覽器的兼容性還存有一定的不同,建議使用前先了解下對應用法及兼容性。

    通常最為我們熟知的CSS偽類選擇器就是下面這四兄弟:

    • :link / 未訪問的鏈接 /
    • :visited / 已訪問的鏈接 /
    • :hover / 鼠標劃過鏈接 /
    • :active / 已選中的鏈接 /

    其實他們的群體不僅僅至少有這四位,還有下面這一群:

    • :target / 匹配所有URL帶有#XXX錨鏈接的元素 /
    • :first-child / 匹配某個父級元素的第一個子元素 /
    • :first-letter / 匹配當前元素的第一個字母 /
    • :first-line / 匹配當前元素的第一行 /
    • :before / 匹配當前元素的前面 /
    • :after / 匹配當前元素的后面 /
    • :nth-child / 匹配某個父級元素的第n個子元素 /
    • :empty / 匹配沒有內容或子元素的元素 /
    • :checked / 匹配任何選中狀態的radio/checkbox/option /
    • :blank / 匹配未輸入的輸入框元素 /
    • :enabled / 匹配設置啟用了enabled的元素(設置為輸入元素) /
    • :disabled / 匹配設置了disabled的元素(禁止輸入) /
    • :required / 匹配設置了required的元素 (必須輸入)/
    • :valid / 匹配判定輸入內容有效的輸入框元素 /
    • :invalid / 匹配判定輸入內容無效的輸入框元素 /
    • :playing / 匹配正在播放的音頻或視頻元素 /
    • :lang / 匹配設置了lang='no'屬性的元素 /
    • :focus / 匹配當前獲取焦點的元素 /

    當然偽類選擇器還有很多,我們只是例舉了部分相對常用的,想了解更多可以看看《CSS偽類選擇器》

    今天我們主要是來介紹一下下面這三個新面孔的:

    • :is / 將對應的匹配規則應用于多個元素(最高優先級) /
    • :where / 將對應的匹配規則應用于多個元素(最低優先級)/
    • :has / 匹配包含對應子元素的父級元素 /

    1 . :is偽類選擇器

    允許將某個選擇器規則匹配于多個選擇器,并且是一個可容錯的選擇器列表,當某一項規則無效時,不會阻礙其他選擇器的匹配。
    相關瀏覽器兼容性:
    來個簡單的例子先理解一下使用前:

    header p:hover, main p:hover, footer p:hover { color: #444; cursor: pointer; }

    或像Sass進行嵌套

    header, main, footer { p { color: #444; cursor: pointer; } }

    使用后:

    :is(header, main, footer) p { color: #444; }

    再來個復雜點的例子

    使用前:

    article section.primary:not(:first-child) h1, article section.primary:not(:first-child) h2, article section.primary:not(:first-child) p, article section.secondary:not(:first-child) h1, article section.secondary:not(:first-child) h2, article section.secondary:not(:first-child) p { color: green; }

    使用后:

    article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) { color: green; }

    且當其中某一個條件不匹配時,并不會導致失效,而是會自動匹配下一個選擇器。

    2 .:where偽類選擇器

    功能上與 :is 相同,區別在于:is偽類選擇器擁有最高優先級,而 :where 的優先級則為0,可以避免影響其他已經聲明同類樣式效果。
    相關瀏覽器兼容性:
    舉個例子:

    article p { color: black; } :is(article, section, aside) p { color: red; } :where(article, section, aside) p { color: blue; }

    上面代碼中三句樣式都針對article中的p元素設置了字體顏色,但最終p標簽的字體顏色是紅色。也就是:is的最高優先級產生了效果,其次是article p{},最后才是:where。因此where可以更多的應用于需要低優先級渲染樣式的需求中。

    3 . :has偽類選擇器

    :has支持匹配對應規則的父級選擇器,這將是最受歡迎的偽類選擇器之一。
    相關瀏覽器兼容性:
    來個簡單的例子先理解一下

    a:has(img, section) { color: red; }

    上面代碼會匹配出所有包含了img與section元素的父級a元素,并設置紅色字體顏色。
    再來個相對復雜點的例子

    fieldset:has(:required:invalid) { border: 3px solid red; }

    上面的例子當fieldset元素內出現不滿足:required或者:invalid其中某個條件的元素時,fieldset元素會被設置一個3px的紅色實線邊框。


    CSS

    1 人點贊

    女人ZOZOZO人禽交,做爰全过程免费无码的视频,18禁深夜福利网站APP免费,哔哩哔哩隐藏的肉片人肉片

    <th id="mffed"><video id="mffed"></video></th>
    <pre id="mffed"></pre>
      <th id="mffed"><sup id="mffed"></sup></th>
    1. <th id="mffed"><video id="mffed"></video></th>
      <th id="mffed"><video id="mffed"></video></th>