1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    CSS新增的:where和:is偽類函數是什么_CSS教程_CSS_網頁制作

    來源:腳本之家  責任編輯:小易  

    什么是 :is 與 :where?
     

    :is() :where() 都是偽類函數,可以幫助縮短和停止創建選擇器時的重復。它們都接受選擇器的參數數組(id,類,標簽等),并選擇可以在該列表中選擇的任何元素。

    這對如何幫助我們編寫更短的選擇器可能沒有多大意義,所以讓我們嘗試使用 :where() 和 :is()

    如何使用 :is 與 :where?

    :where() 可以幫助我們解決類似這樣的問題

    .btn span > a:hover,
    #header span > a:hover,
    #footer span > a:hover {
      ...;
    }

    變成這樣的東西

    :where(.btn, #header, #footer) span > a:hover {
      ...;
    }

    和 :is() 可以幫助將相同的示例添加到該示例中

    is(.btn, #header, #footer) span > a:hover {
      ...;
    }

    :is 與 :where 和有什么不一樣?

    :where():is() 看起來和功能都是一樣的,但是它們之間有一個區別要記住,那就是它們有不同的特殊性。:where() 是簡單的,其特異性總是為 0,而 :is() 的特異性為最強的選擇器。

    什么是 CSS 特異性(簡而言之)?

    在 CSS 中有四個層次的特異性層次。每一個級別或類別都有不同的分數,我們可以將所有的分數相加來計算選擇器的特異性。

    哪個選擇器的數量最多,哪個元素的樣式就會被應用到該元素上,這就是為什么有時當你寫 CSS 時,你的樣式不會被應用,會在開發工具中顯示為劃線。

    特異性等級評分

    ID——特異性得分為 100 內聯樣式——特異性得分為 1000 元素和偽類——特異性得分為 1 類、偽類和屬性——特異性得分為 10

    例如

    button.btn {
      color: red;
    }
    .btn {
      color: green;
    }
    .btn = 10
    
    button.btn = 1 + 10 = 11

    如果我們把 .btn 類放在 <button> 標簽上,文字就會變成紅色,因為 button.btn 選擇器的分數高于 .btn 選擇器。

    正如你所看到的,有兩種不同的專屬性級別的偽類,這是因為不同的偽類可能具有不同的專屬性,這取決于你使用的偽類以及如何使用它們。

    到此這篇關于CSS新增的:where和:is偽類函數是什么的文章就介紹到這了,更多相關CSS :where和:is偽類函數內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!


  3. 本文相關:
  4. 詳解css3中的偽類before和after常見用法
  5. css偽類:empty讓我眼前一亮(實例代碼)
  6. 淺談css 偽元素&偽類的妙用
  7. css 偽類修改input選中樣式的示例代碼
  8. css偽類 右下角點擊出現 對號角標表示選中的示例代碼
  9. css選擇器四大類:基本、組合、屬性、偽類
  10. 詳解如何使用css3中的結構偽類選擇器和偽元素選擇器
  11. 解決移動端跳轉問題(css過渡、target偽類)
  12. css3 偽類選擇器快速復習小結
  13. html 5 的CSS3選擇器中,除了結構性偽類,CSS3新增...
  14. 什么叫css的偽類呢?
  15. css中什么是偽類和偽元素?
  16. CSS3 新增偽類有哪些
  17. CSS偽類定義3種方法
  18. CSS中的偽類是什么,有什么用
  19. html 5 的CSS3新增的偽類選擇器還包括哪些?
  20. CSS中的偽類是什么,有什么用??
  21. 什么是CSS偽類
  22. html 5 的CSS3新增的偽類選擇器還包括哪些呀?
  23. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程css:where:iscss偽類 右下角點擊出現 對號角標表示選中的示例代碼css3 偽類選擇器快速復習小結css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css新增的:where和:is偽類函數是什么css3實現背景圖片半透明內容不透明的方法示例純css實現酷炫的霓虹燈效果(附demo)淺談移動端中的視口(viewport)的具體使用老生常談 使用 css 實現三角形的技巧(多種方法)css中em的正確打開方式詳解css 中多種邊框的實現小竅門使用html+css實現簡易導航欄功能(導航欄遇到鼠標切換html+css 實現簡易導航欄功能簡單的css文字動畫效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载