【前端工程師手冊】30分鐘搞清楚選擇器和權重

boredream 發布于2019-08-30 14:10 / 1467人閱讀

有哪些選擇器 基本選擇器

通配選擇器（＊）

ID選擇器（#ID）

類選擇器（.className）

元素選擇器(tagName)

后代選擇器（a b）

子元素選擇器(a>b)

相鄰后面兄弟元素選擇器(a + b)

通用后面兄弟選擇器（a ? b）

群組選擇器（selector1,selector2,...）

這里面平時不太常用的選擇器有相鄰后面兄弟選擇器和通用后面兄弟選擇器
首先，很多資料上把它們叫做相鄰兄弟選擇器和通用兄弟選擇器，我覺得這樣會有一定的誤導意義，
例如：
`


    1
    2
    3
    4
    5
    6
    7
    8
    9

li {
    list-style: none;
    height: 20px;
    width: 20px;
    background: red;
    margin: 10px;
    border-radius: 10px;
    text-align: center;
    color: white;
    float: left;
    line-height: 20px;
}

當使用相鄰兄弟選擇器時：

.l3 + li {
    background: green;
}

效果為：

可以看出相鄰兄弟選擇器只會選擇它后面的一個兄弟元素。
當使用通用兄弟選擇器：

.l3 ~ li {
    background: green;
}

效果為：

可以看出來通用兄弟選擇器會選擇它后面所有的兄弟元素

屬性選擇器

E[attr]：只使用屬性名，但沒有確定任何屬性值

E[attr="value"]：指定屬性名，并指定了該屬性的屬性值

E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫

E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開頭的；

E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結束的；

E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value；

E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說big-name）;

屬性選擇器中有波浪（?）時屬性值有value時就相匹配，沒有波浪（?）時屬性值要完全是value時才匹配

偽類選擇器

動態偽類

在鏈接中常看到的錨點偽類：link、visited、hover、active

UI元素狀態偽類

例如 :enabled，:disabled，:checked等，這些主要是對一些表單元素操作。
比較常見的如"type="text"有enable和disabled兩種狀態，前者為可寫狀態后者為不可寫狀態。

CSS3的:nth選擇器

first-child: 選擇某個元素的第一次的出現

last-child: 選擇某個元素的最后一次的出現

nth-child(): 選擇某個元素的一個或多個特定的條件的出現

權重如何計算

根據樣式所在位置，對元素的影響也有關系：內聯樣式（標簽內style形式） > style標簽 > link標簽
根據選擇器的類型，id選擇器 > 類、屬性選擇器和偽類選擇器 > 元素和偽元素
一般來說我們的計算方式為，從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1

參考資料：
你應該知道的一些事情-css權重
css選擇器-基本選擇器
css選擇器-屬性選擇器
css選擇器-偽類選擇器

云服務器 GPU云服務器 30分鐘云服務器網絡電話免費30分鐘搞清前端前端工程師

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

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

【前端工程師手冊】30分鐘搞清楚選擇器和權重

有哪些選擇器基本選擇器通配選擇器（＊） ID選擇器（#ID）類選擇器（.className）元素選擇器(tagName) 后代選擇器（a b）子元素選擇器(a>b) 相鄰后面兄弟元素選擇器(a + b) 通用后面兄弟選擇器（a ? b）群組選擇器（selector1,selector2,...）這里面平時不太常用的選擇器有相鄰后面兄弟選擇器和通用后面兄弟選擇器首先，很多資料上把它...

SexySix 2019-08-01 18:42 評論0 收藏0
20W字囊括上百個前端面試題的項目開源了

摘要：字囊括上百個前端面試題的項目開源了這個項目是什么項目內容這個項目目前在上剛剛開源主要內容如下前端面試題主要整理了高頻且有一定難度的前端面試題對這些面試題進行解讀前端原理詳解針對一些有一定難度面試題涉及的知識點進行詳解比如涉及的編譯原理響應式 20W字囊括上百個前端面試題的項目開源了這個項目是什么? 項目內容這個項目目前在GitHub上剛剛開源,主要內容如下: 前端面試題: 主要整...

Euphoria 2019-08-26 10:49 評論0 收藏0
運維定位服務故障時，前5分鐘都在忙啥？

摘要：我們基本上都會從以下步驟入手，這些也是絕大多數運維工程師在定位故障時前幾分鐘的主要排查點一盡可能搞清楚問題的前因后果不要一下子就扎到服務器前面，你需要先搞明白對這臺服務器有多少已知的情況，還有故障的具體情況。遇到服務器故障，問題出現的原因很少可以一下就想到。我們基本上都會從以下步驟入手，這些也是絕大多數運維工程師在定位故障時前幾分鐘的主要排查點：一、盡可能搞清楚問題的前因后果不要一下子就扎...

tainzhi 2019-04-25 17:22 評論0 收藏0
flex布局的元素如何分配容器的剩余空間

摘要：三個元素會從左往右占據父元素的空間這很顯然。左右側邊欄的寬度都是，中間元素的寬度將會占據元素的剩余寬度。同樣會導致父元素有部分剩余空間沒有分配。自從開始開學習 CSS 布局，想要比較靈活的把父元素的空間分配給各個子元一直是各個前端程序員的夢想。在 flex 之前，如果不是專門去搜索相關的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高布局方案，而即使看了解決方案，很多人也會大呼奇技...

ethernet 2019-08-30 15:44 評論0 收藏0
Quantum CSS，一個超快的CSS引擎

摘要：既然出現了，那怎么辦，目前并沒聽說出現什么新的技術替代它雖然它真的已經很不適合現代的前端了，那么只能開發一個新的引擎提高性能，這就是火狐家的量子引擎又叫。這就是所謂的，火狐前一個引擎所做的那樣。開始本文翻譯自Inside a super fast CSS engine: Quantum CSS ，如果想要閱讀原文，可以點擊前往，以下內容夾雜本人一些思考，翻譯也并不一定完全。碎碎念...

jerryloveemily 2019-08-22 11:06 評論0 收藏0