【前端工程師手冊(cè)】30分鐘搞清楚選擇器和權(quán)重

boredream 發(fā)布于2019-08-30 14:10 / 1458人閱讀

有哪些選擇器 基本選擇器

通配選擇器（＊）

ID選擇器（#ID）

類選擇器（.className）

元素選擇器(tagName)

后代選擇器（a b）

子元素選擇器(a>b)

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

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

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

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


    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;
}

當(dāng)使用相鄰兄弟選擇器時(shí)：

.l3 + li {
    background: green;
}

效果為：

可以看出相鄰兄弟選擇器只會(huì)選擇它后面的一個(gè)兄弟元素。
當(dāng)使用通用兄弟選擇器：

.l3 ~ li {
    background: green;
}

效果為：

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

屬性選擇器

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

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

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

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

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

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

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

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

偽類選擇器

動(dòng)態(tài)偽類

在鏈接中常看到的錨點(diǎn)偽類：link、visited、hover、active

UI元素狀態(tài)偽類

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

CSS3的:nth選擇器

first-child: 選擇某個(gè)元素的第一次的出現(xiàn)

last-child: 選擇某個(gè)元素的最后一次的出現(xiàn)

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

權(quán)重如何計(jì)算

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

參考資料：
你應(yīng)該知道的一些事情-css權(quán)重
css選擇器-基本選擇器
css選擇器-屬性選擇器
css選擇器-偽類選擇器