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

有哪些選擇器

基本選擇器

1. 通配選擇器（＊）
2. ID選擇器（#ID）
3. 類選擇器（.className）
4. 元素選擇器(tagName)
5. 後代選擇器（a b）
6. 子元素選擇器(a>b)
7. 相鄰後面兄弟元素選擇器(a + b)
8. 通用後面兄弟選擇器（a 〜 b）
9. 羣組選擇器（selector1,selector2,...）

這裏面平時不太經常使用的選擇器有相鄰後面兄弟選擇器和通用後面兄弟選擇器
首先，不少資料上把它們叫作相鄰兄弟選擇器和通用兄弟選擇器，我以爲這樣會有必定的誤導意義，
例如：
`

<ul>
    <li class="l1">1</li>
    <li class="l2">2</li>
    <li class="l3">3</li>
    <li class="l4">4</li>
    <li class="l5">5</li>
    <li class="l6">6</li>
    <li class="l7">7</li>
    <li class="l8">8</li>
    <li class="l9">9</li>
</ul>
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選擇器-僞類選擇器