聊聊選擇器的一些事

失蹤人口冒個泡

優先級

入門學習的時候必定就據說過這些概念，在菜鳥教程之類的網站上也確定學習過，好比類的優先級爲 十、標籤的優先級爲 1，這些都是輔助咱們記憶的，下面就來講一說容易出錯的點。

.top {
  margin: 10px;
}
[class] {
  margin: 20px;
}
複製代碼

這裏輸出的margin爲多少？

答案是20px，對於類和屬性選擇器以及僞類優先級是一致的，固然這個例子只是幫你溫習的，再來看一個

/*第一條*/
body [class] {
  color: #666;
}
/*第二條*/
html:not([dir]) {
  color: red;
}
複製代碼

這裏兩條屬性的優先級相等麼？

答案是相等的，對於:not這樣的邏輯組合僞類影響優先級的是裏面的元素，上面第一條是一個標籤加上屬性選擇器優先級爲 11，第二條 html 標籤加上屬性選擇器優先級也是 11。

渲染順序

上面舉了一個例子最終顏色生效爲red，這是由於後來居上的原則，不過注意這個後來居上說的是總體文檔而言。

<link rel="stylesheet" href="a.css" /> <link rel="stylesheet" href="b.css" />
複製代碼

a.css

body .foo {
  color: red;
}
複製代碼

b.css

html .foo {
  color: #666;
}
複製代碼

最終color的值爲#666，同時還提醒一下 css 最終生效並非看元素的距離的遠近，而是根據優先級和位置，好比上面的 body 確定比 html 離得近，可是由於後來居上因此並無生效。

選擇器是否能跨級？

在開頭說了方便記憶咱們會給類和標籤之類的優先級添加上數字，可是若是你想用數量多就覆蓋高一層級的是不可能的

.a {
  color: red;
}
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a,
a {
  color: #666;
}
複製代碼

輸出結果仍是紅色。

增長優先級

傳統添加優先級咱們可能會經過給標籤添加 id 或者繼續嵌套來實現，不過這樣作確定不合適由於後面在想修改可能就須要使用style或者important了，下面就說下兩個小技巧

1. 使用屬性選擇器

.a[class] {
  color: red;
}
.a {
  color: #666;
}
複製代碼

2. 嵌套選擇本身

.a.a {
  color: red;
}
.a {
  color: #666;
}
複製代碼

匹配順序

說一點新手噩夢，css 的匹配順序是從右往左，因此嵌套太多層的 css 語句就不要在寫了，通常而言 id 選擇器和類選擇器的解析最快，標籤選擇器的速度很慢，因此在項目中不要嵌入太多的標籤選擇器有利於項目的優化。

是否區分大小寫

說這個首先要說一下 html 是否區分大小寫，html 對於標籤和屬性是不區分大小寫的，而對屬性值則是區分的，css 與 html 保持一致

<style> p { color: #666; } [CLASS] { color: red; } .foo { color: white; } </style>
<p class="FOO">hello wrold</p>
複製代碼

這裏 p 的 color 爲 red，說明了標籤和屬性選擇器不區分大小寫，而對於 class 則是區分的。