站長資訊網(wǎng)本篇文章帶大家了解一下CSS的三種基本選擇器：元素選擇器、類選擇器、id選擇器，并聊聊這三種選擇器優(yōu)先級，希望對大家有所幫助！
CSS 選擇器用于“查找”（或選取）要設(shè)置樣式的 HTML 元素。【推薦學(xué)習(xí)：css視頻教程】
基本選擇器
| 選擇器名稱 | 舉例 | 描述 |
|---|---|---|
| 元素選擇器 | p {color:red;} | 選擇所有<p>元素。 |
| 類選擇器 | .mystyle {color:red;} | 選擇所有class='mystyle’的標(biāo)簽元素 |
| id選擇器 | #myid {color:red;} | 選擇所有id="myid"的標(biāo)簽元素 |
全局選擇器|* {color:red;}|選擇該頁面中所有的HTML元素
1、元素選擇器
根據(jù)元素名稱來選擇 HTML 元素。
p { text-align: center; color: green; }
2、類選擇器
選擇有特定 class 屬性的 HTML 元素。
.mystyle1 { background:rgb(200,200,0); color:blue; } .mystyle2{ font-size: 14px; font-weight: 500; display: block; margin-top: 25px; }
運(yùn)行結(jié)果
<p>這個段落沒有引用</p> <p class="mystyle1 mystyle2">這個段落引用兩個類。</p>
在使用時同一個HTML 元素可以引用多個類。
1）單類選擇器
單純的元素選擇器似乎還過于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問題在于我們不能確定稿件的截至日期將會出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(class selector)。使用類選擇器我們需要首先對文件元素添加一個class屬性，比如截至日期可能會出現(xiàn)在以下元素中：
這樣我們就可以用以下方式使用類選擇器了：
點(diǎn)號”.”加上類名就組成了一個類選擇器。以上2個選擇器會選擇所有包含”deadline”類的p元素和h2元素。而其余包含該屬性的元素則不會被選中。如果我們省略.deadline前面的元素名，那么所有包含該類的元素都將被選中：
通常情況下，我們會組合使用以上2者得到更加有趣的樣式：
以上代碼首先會對所有的包含deadline的元素字體設(shè)置為紅色，同時會對span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在<span></span>中就可以了。
2）多類選擇器
在實(shí)踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。
比如某些元素包含一個”warning”類，某些元素包含一個”important”類，某些元素同時包含”warning important”類。屬性名出現(xiàn)的順序沒有關(guān)系：
以上2者是等價的。
我們希望包含warning類的元素有一個醒目的紅色字體，包含important屬性的元素有一個加粗的字體顯示，而同時包含以上2中屬性的元素另外擁有一個藍(lán)色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：
當(dāng)然，第三條你也可以寫成：
和詞序沒有關(guān)系。
說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。
而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現(xiàn)的順序，只要其中含有這2個屬性，則會被選擇進(jìn)來！
同樣地，多于多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：
將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。
3、id選擇器
ID選擇器和類選擇器有些類似，但是差別又十分顯著。
首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文檔中只能出現(xiàn)一次，也就是一個ID只能唯一標(biāo)識一個元素(不是一類元素，而是一個元素)。
元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇一個唯一的元素！
在樣式定義時，id選擇器前面要添加’#'符號
#div1{ background:rgb(200,200,0); color:blue; font-size:20px; }
運(yùn)行結(jié)果
<p>這是一個段落</p> <p id="div1">這是一個段落</p>
注意：由于id屬性的唯一性，一般使用css做樣式不使用該選擇器，而該選擇器的主要用途是用來做js特效
三種選擇器優(yōu)先級
問題引入
如果有多個選擇器選擇到了同一個HTML元素，要將其樣式進(jìn)行改變，但是這些選擇器定義的樣式又是互斥的，那么該HTML元素的樣式最終以哪一個作為最終顯示結(jié)果呢？
瀏覽器根據(jù)css樣式渲染某一個元素時，會遵循一定的規(guī)則，一般來說有以下的優(yōu)先級規(guī)則，我們將其量化為特異性值
-
行內(nèi)樣式（1000），如
<h1 style="color: blue;"> -
id選擇器（100），
#myid{color:red;} -
類選擇器、屬性選擇器、偽類選擇器（10）：
.myclass1{color:yellow;}、a[target=_blank] -
元素選擇器（1）：
h1 {color:green;}
下面我們來看一個例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>這是一個demo</title> <style> #myid{color:red;} .myclass1{color:yellow;} h1,p {color:green;} </style> <body> <h1 style="color: blue;" id="myid">這是一個標(biāo)題，請查看優(yōu)先級</h1> <p id="myid">這是一個段落，請查看優(yōu)先級</p> </body> </head> </html>
我們可以看到因?yàn)闃?biāo)簽<h1>有行內(nèi)樣式，所以它顯示為了藍(lán)色；
而標(biāo)簽<p>雖然定義了三種css樣式，但是由于id選擇器的優(yōu)先級最高，所以顯示為了紅色
（學(xué)習(xí)視頻分享：web前端入門）
