一、常見CSS選擇器
【元素選擇器】
1、通配選擇器：*（匹配所有元素）
a、效率不高，頁面上的標簽越多，效率越低，所以頁面上最好不要出現這個選擇器
2、標簽選擇器：li（匹配標簽為li的元素）
a、所有標簽都能夠當做選擇器，比如body、h1、dl、ul、span等等
b、不管這個標簽藏的多深，都能夠被選擇上
c、選擇的是所有的，而不是某一個。所以是共性，而不是特性
3、ID選擇器：#content（匹配ID屬性值等於content的元素）
4、類選擇器：.list（匹配class屬性包含list的元素）
a、class可以重復，也就是說，同一個頁面上可能有多個標簽同時屬於某一個類
b、同一個標簽可以同時攜帶多個類，多個類用空格隔開，多個樣式有沖突的，以css中后出現的為准
c、不要去試圖用一個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，共同造成這個標簽的樣式
d、每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用
【關系選擇器】
1、后代選擇器：#content h3（匹配ID為content的元素內所有的h3元素）
a、空格就表示后代，強調一下：選擇的是后代，不一定是兒子
b、當要把某一個部分的所有的什么，進行樣式改變，就要想到后代選擇器
2、子元素選擇器：#content>h3（匹配ID為content的元素子級的h3元素）
3、交集選擇器：h3.content（匹配class為content的h3元素）
a、交集選擇器沒有空格
b、交集選擇器可以連續交（一般不要這么寫）
c、交集選擇器，我們一般都是以標簽名開頭，比如div.haha 比如p.special
4、並集選擇器（分組選擇器）：h1，h2（匹配所有的h1和h2元素）
5、相鄰選擇器：h1+h2（匹配 h1 元素之后緊跟的 h2 元素）
6、兄弟選擇器：h1~h2（匹配 h1 元素之后所有的 h2 元素）
【屬性選擇器】
1、a[class]：匹配具有 class 屬性值的 a 的元素
2、a[target="_blank"]：匹配 target 屬性值等於 _blank 的 a 元素
3、a[href^="https"]：匹配 href 屬性值以 https 開頭的 a 元素
4、a[href$=".jpg"]：匹配 href 屬性值以 .jpg 結尾的 a 元素
5、a[href*="baike"]：匹配 href 屬性值包含 baike 的 a 元素
6、a[class~="abc"]：匹配 class 屬性值以空格為分隔符，其中有一個等於 abc 的 a 元素
偽類選擇器和偽元素選擇器使用頻率不高，本文暫不說明，詳細示例可參考：https://www.haorooms.com/tools/css_selecter/
二、CSS選擇器權重和優先級
共分為5個等級 ：
第1等：提升指定樣式規則的應用優先權，如：color:red !important，權值為10000（不建議使用）
第2等：代表內聯樣式，如: style="xxx"，權值為1000
第3等：代表ID選擇器，如：#content，權值為100
第4等：代表類，偽類和屬性選擇器，如.content，:hover，[attribute]，權值為10
第5等：代表元素選擇器和偽元素選擇器，如div，p，權值為1
通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0
三、CSS選擇器權重計算
1、元素被兩個css樣式選中，選擇權重大的樣式，如果權重一樣，以css中后出現的為准
2、元素沒有被css樣式選中，要顯示繼承的樣式時，使用就近原則
2、繼承的樣式權重為0（color、 text-開頭的、line-開頭的、font-開頭的樣式都可以繼承）
判斷一塊內容的樣式是什么？按照以下步驟：
<div id="content">
<div id="main-content">
<h2>CSS簡介</h2>
<p>CSS是一組格式設置規則，用於控制Web頁面的外觀。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的優點</h2>
<p>1、表現和內容相分離 2、提高頁面瀏覽速度 3、易於維護和改版</p>
</div>
</div>
</div>
CSS代碼：
/* 100(#main-content) + 10(class="paragraph") + 1(h2) = 111 */
#main-content [class="paragraph"] h2 {
color:yellow;
}
/* 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) = 112 */
#main-content div.paragraph h2 {
color:orange;
}
/* 1(body) + 100(#content) + 1(div) + 10([id="main-content"]) + 1(h2) = 113 */
body #content div[id="main-content"] h2 {
color:green;
}
/* 1(div) + 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) + 10(.first) = 123 */
div#main-content div.paragraph h2.first {
color:pink;
}
/* 100(#content) + 100(#main-content) + 1(h2) = 201 */
#content #main-content>h2 {
color:blue
}
/* 100(#content) + 1(div) + 100(#main-content) + 1(h2) = 202 */
#content div#main-content h2{
color:red;
}