CSS選擇器

hlcfan 發布于2019-08-30 15:54 / 584人閱讀

摘要：一前言目前在做的練習，初步學習到內容，所以做了總結。這篇博文主要介紹了的選擇器相關概念。

一前言

目前在做IFE的練習，初步學習到CSS內容，所以做了總結。
這篇博文主要介紹了CSS的選擇器相關概念。

二選擇器類型 2.1 類型概述

CSS選擇器可以被分為以下類別:
S1 簡單選擇器
??A1 元素選擇器
??A2 類選擇器
??A3 ID選擇器
??A4 通用選擇器

S2 屬性選擇器
??A1 簡單屬性選擇
??A2 具體屬性值
??A3 部分屬性值（子串值屬性選擇器）

S3 偽類和偽元素選擇器

S4 派生選擇器
??A1 h1,p {xxx}: h1 和 p 同時使用樣式規則，他們是并列關系

S5 組合器
??A1 .xxx .yyy: 后代選擇器，選中 .xxx元素的后代中的含有.yyy類的元素;
??A2 直接子元素選擇器 A > B;
??A3 相鄰兄弟選擇器 A + B
??A4 普通兄弟選擇器 A ~ B

2.2 類選擇器(注意點)

S1 通用類選擇器 .xxx: 選取所有含有xxx類屬性的HTML元素;
S2 元素特定類選擇器 p.xxx: 選取含有xxx類屬性的 p元素，而不會選中含有xxx類屬性的 span元素
S3 多類選擇器
??HTML結構上

??A1 .xxx: 會對 p 和 a 應用樣式;
??A2 .xxx.yyy: 會對含有 xxx & yyy的元素使用樣式，這里就是 p 和 span;
??A3 P.xxx.yyy: 只會對同時含有 xxx & yyy的 p元素使用樣式，這里就是 p元素

S4 類選擇器和id選擇器的區別聯系
??A1 在HTML中，都區分大小寫;
??A2 id屬性的值是唯一的，而class屬性值可以重復
??A3 一般實際開發情況下，id給js用，class給css用
??A4 應該根據 “他們是什么”來為元素命名，而不是“他們的外觀是什么”

2.3 屬性選擇器(注意點)

S1 簡單屬性選擇
??A1 a[class/href]: 選中所有含有 href/class屬性（屬性值不限）的 a元素;
??A2 ahref: 選中同時含有 href + title屬性（屬性值不限）的 a元素;

S2 具體屬性值
??A1 a[href="xxx"]: 選中含有 href屬性 + 屬性值嚴格等于/完全匹配xxx的 a元素;
??A2 ahref="xxx": 選中同時含有 href(屬性值嚴格等于xxx) + title屬性(屬性值嚴格等于yyy)的 a元素;

S3 部分屬性值（子串值屬性選擇器）
??A1 a[href~="xxx"]: 選中含有 href屬性 + 屬性值中包含xxx即可的 a元素;
??A2 P[lang |="en"]: 選中含有 lang屬性 + 屬性值中等于en/ 以en開頭的 p元素;

2.4 偽類/偽元素選擇器(注意點)

S1 什么時候使用偽類：當希望某些樣式，在特定狀態下才應用到指定的元素時;

    偽類可以對一個元素的不同狀態/類型進行區分

S2 結構偽類
??A1 :first-child偽類: 見MDN的 :first-child;
??類似的還有
??:last-child偽類;
??:first-of-type偽類 / :last-of-type偽類

??A2 :nth-child(num)
???? P:nth-child(2n)表示的含義是選中p其父元素下的，偶數位的元素，不管元素類型是不是P;

????thead th:nth-child(-n+2),表示的含義是選中 th其父元素thead下，其2-n(n≥0)數位的元素

??:nth-of-type(num)
????P:nth-of-type(2n)表示的含義是選中p其父元素下的，偶數位的元素，數位1是從元素類型為P的元素開始計數的

??A3 :nth-last-child / :nth-of-type 同上，不過是從反向開始計數而已

S3 其他偽類
A1 :target偽類
A2 :empty偽類
A3 :not偽類見MDN的 :not;

A4 鏈接偽類的推薦順序是 link - visited - focus - hover - active

三參考文檔

??1 CSS權威指南;
??2 MDN的簡單選擇器;
??3 MDN的屬性選擇器;
??4 MDN的偽類和偽元素選擇器;
??5 MDN的組合器和選擇器組;

??6 CSS 派生選擇器;

GPU云服務器云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116819.html

WEB前端 CSS

摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個弟弟，找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器標簽選擇...

darry 2019-04-23 13:34 評論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。有很多人都忘記了，或在簡單的說沒有意識...

forrest23 2019-08-02 16:16 評論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。有很多人都忘記了，或在簡單的說沒有意識...

hyuan 2019-08-30 10:50 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

Scott 2019-08-30 14:08 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

XGBCCC 2019-08-01 18:42 評論0 收藏0