CSS中常用的選擇器：
成都創(chuàng)新互聯(lián)專注于德欽企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都做商城網(wǎng)站。德欽網(wǎng)站建設(shè)公司,為德欽等地區(qū)提供建站服務(wù)。全流程按需設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
（一）基本選擇器（二）層次選擇器（三）動態(tài)偽類選擇器（四）目標偽類選擇器
（五）ui狀態(tài)偽類選擇器（六）結(jié)構(gòu)偽類選擇器（七）屬性選擇器（八）偽元素
(一)基本選擇器
1.標簽選擇器：通過標簽名獲取元素 權(quán)重：0001
（此種選擇器影響范圍大，建議盡量應(yīng)用在層級選擇器中。）
2.class選擇器：通過 . 類名獲取元素 權(quán)重：0010
（通過class類名來選擇元素，一個類可應(yīng)用于多個元素，一個元素上也可以使用多個類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。）
3.id選擇器：通過 # id名獲取元素 權(quán)重：0100
（通過id名來選擇元素，元素的id名稱不能重復(fù)，所以一個樣式設(shè)置項只能對應(yīng)于頁面上一個元素，不能復(fù)用，id名一般給程序使用，所以不推薦使用id作為選擇器。 ）
4. * 通配符選擇器：獲取到頁面的所有元素
5.群組選擇器：用逗號隔開基本選擇器，表示這些選擇器都獲取到
(二)層次/關(guān)系選擇器
（主要應(yīng)用在選擇父元素下的子元素，或者子元素下面的子元素，可與標簽元素結(jié)合使用，減少命名，同時也可以通過層級，防止命名沖突。）
1.包含選擇器：用空格隔開基本選擇器，表示后一個選擇器是前面的后代
例：p a { color:red; }
2.子代選擇器：用隔開基本選擇器，表示后一個選擇器是前面的子代
例：ulli { line-style: none; }
3.相鄰兄弟選擇器：E+F:表示獲取到E后面的緊跟著的F元素（同級的）
例： a+a { }
4.兄弟選擇器：E~F:表示獲取到E后面所有的同級的F元素
例： li~li { }
(三）動態(tài)偽類選擇器
1. a:link 錨鏈接被訪問前添加樣式
2. a:visited 錨鏈接被訪問后添加樣式
3. e:hover 鼠標懸停在元素上添加樣式
4. e:active 鼠標點擊元素時添加樣式
5. :focus 表單元素被聚焦時，添加樣式
(四)目標偽類選擇器
語法： 目標:target {屬性：屬性值} 被選中的目標添加樣式
目標:target E子元素{屬性：屬性值} 被選中的目標里的E子元素添加樣式
(五)ui狀態(tài)偽類選擇器
1. :enabled 可用的表單元素添加樣式
2. :disabled 不可用的表單元素添加樣式(disabled )
3. :checked+E 被選中的表單元素添加樣式
(六)結(jié)構(gòu)偽類選擇器
1. E:first-child 獲取到E元素，且要滿足為其父元素的第一個孩子。
2. E:last-child 獲取到E元素，且要滿足為其父元素的最后一個孩子
3. E:nth-child(n) 獲取到E元素，且要滿足為其父元素的第n個孩子
n的用法：
(1)6n倍數(shù) (2)even偶數(shù)/2n odd奇數(shù)/2n-1（如可用來選中奇偶行來實現(xiàn) “隔行換色”）
(3) -n+5 選中1-5
(4)p:nth-child(-n+3):nth-child(n+2) 2-3個
4. E:nth-last-child(n) 獲取到E元素，且要滿足為其父元素的倒數(shù)第n個孩子
5. E:first-of-type 獲取到E元素，且要滿足為其父元素的第一個該類型的孩子
6. E:last-of-type 獲取到E元素，且要滿足為其父元素的最后一個該類型的孩子
7. E:nth-of-type(n) 獲取到E元素，且要滿足為其父元素的第n個該類型的孩子
8. E:nth-last-of-type(n)獲取到E元素，且要滿足為其父元素的倒數(shù)第n個該類型的孩子
9. E:empty 獲取到空的E元素（注：連空格都不能有）
(七)屬性選擇器
1. E[attr] 擁0有attr屬性的E元素添加樣式 如div[class];
2. E[attr="val"] 擁有attr屬性值 為 val的E元素添加樣式 如p[class="ab"]
3. E[attr*="val"] attr屬性值 包含 val的E元素添加樣式
如ul[class="c"] 指class類名中包含有c字母的E元素
4. E[attr^="val"] attr屬性值以val 開頭 的E元素添加樣式
5. E[attr$="val"] attr屬性值以val 結(jié)尾 的E元素添加樣式
(八)偽元素
1. E::before給E元素添加第一個子元素 （前面）
2. E::after 給E元素添加最后一個子元素（后面）
3. E::first-letter給E元素第一個字添加樣式
4. E::first-line給E元素第一行添加樣式
5. E::selection 元素內(nèi)容被選中時添加樣式(火狐需要加前綴-moz-)
主要的css選擇器如下：
1、標簽選擇器
2、類選擇器
3、ID選擇器
4、全局選擇器
5、組合選擇器
6、繼承選擇器
7、偽類選擇器
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
CSS選擇器又被稱為CSS樣式、CSS屬性選擇器。是由css命名及后面屬性及屬性值構(gòu)成一個整體。
1.基礎(chǔ)選擇器
a.id選擇器：通過設(shè)置元素的id屬性為該元素制定ID。ID由開發(fā)者指定。每個ID在文檔中必須是唯一的。在寫樣式表時，ID選擇器是以#開頭的。
HTML
CSS
執(zhí)行效果：
b.class選擇器：是以獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，也就是要保證類名在html標記中存在。
HTML
CSS
執(zhí)行效果：
c.元素選擇器：通過note節(jié)點名稱匹配元素。
HTML
CSS
2.屬性選擇器：
注意：最后一個選擇器是E[attr|=val]，由于輸入|會對表格造成影響，只能用/代替。
CSS3新增了一些屬性選擇器，待持續(xù)更新。
3.組合選擇器
示例如下：
實現(xiàn)效果如下：
示例如下：
從高到低依次是：
1.在屬性后面使用 !important會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義
選擇器的特殊性值表述為4個部分，用0,0,0,0表示。
參考：
1. css優(yōu)先級計算規(guī)則
2. CSS選擇器筆記
3. Selectors MDN
4. CSS3 選擇器——基本選擇器
5. CSS3 選擇器——偽類選擇器
6. 征服高級CSS選擇器
選定所有對象。
語法
以文檔語言對象類型作為選擇符。即 html 中的標簽
語法
以唯一標識符 id 屬性等于 myid 的 E 對象作為選擇符。
語法
以 class 屬性包含 myclass 的 E 對象作為選擇符。
不同于 id 選擇符 的唯一性，類選擇符可以同時定義多個,并控制多個元素的樣式
語法
群組選擇器 (selector1,selectorN) 是將具有 相同樣式 的元素分組在一起，每個選擇器之間用逗號( , )隔開。
語法
后代選擇器( E F )是選擇 E 元素的所有后代 F 元素，不管 F 元素是 E 元素的子元素、孫元素或者更深層的關(guān)系，都會被選中。
語法
子選擇器( EF )是選擇 E 元素的所有子后代 F 元素，注意 F 元素僅僅是 E 元素的子元素而已。
語法
兄弟選擇器( E~F )是 CSS3 新增選擇器，代表 E 和 F 具有同一個父元素，并且 F 元素在 E 元素后面，但是不用相鄰。
例子
語法
相鄰選擇器( E+F )是 E 和 F 具有同一個父元素，并且 F 元素在 E 元素后面且相鄰。
語法
簡介
根據(jù)具有鏈接屬性的 E 元素的被訪問情況進行匹配。
例子
index.html
index.css
簡介
根據(jù)用戶對于 E 元素的操作來進行匹配。
例子
index.html
index.css
CSS選擇器、優(yōu)先級與匹配原理\x0d\x0a1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul 通配選擇符的權(quán)值 0,0,0,0\x0d\x0a2.標簽的權(quán)值為 0,0,0,1\x0d\x0a3.類的權(quán)值為 0,0,1,0\x0d\x0a4.屬性選擇的權(quán)值為 0,0,1,0\x0d\x0a5.偽類選擇的權(quán)值為 0,0,1,0\x0d\x0a6.偽對象選擇的權(quán)值為 0,0,0,1\x0d\x0a7.ID的權(quán)值為 0,1,0,0\x0d\x0a8.important的權(quán)值為最高 1,0,0,0\x0d\x0a使用規(guī)則： 選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先 。\x0d\x0a從上面我們可以得出兩個關(guān)鍵的因素：\x0d\x0a1.權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)\x0d\x0a2.樣式的優(yōu)先級跟樣式的定義順序有關(guān)
CSS選擇器就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。
CSS選擇器分類：
標簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器
1、html標簽選擇器：
定義：以html標簽作為選擇器
2、class類選擇器：
定義：為HTML標簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。
類選擇器也可以對不同類型元素的同一個名稱的類選擇器設(shè)置不同的樣式規(guī)則：
同一個元素可以設(shè)置多個類，之間用空格隔開：
3、ID選擇器
定義：為HTML標簽添加ID屬性，通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則
4、群組選擇器
定義：集體統(tǒng)一設(shè)置樣式
5、全局選擇器
定義：所有標簽設(shè)置樣式
HTML文檔結(jié)構(gòu)圖
6、后代選擇器
定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。
7、偽類選擇器
鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標懸停狀態(tài)。
偽類
說明
:link
未訪問的鏈接
:visited
已訪問的鏈接
:hover
鼠標懸停狀態(tài)
:active
激活的鏈接
:hover 用于訪問的鼠標經(jīng)過某個元素時；
:active 用于一個元素被激活時（即按下鼠標之后放開鼠標之前的狀態(tài)）
偽類選擇器的屬性：link visited hover active
說明：
1)?a:hover 必須置于?a:link和a:visited之后，才有效
2) a:active 必須置于 a:hover之后才有效
3) 偽類名稱對大小寫不敏感
8、CSS其它選擇器
css繼承特性，從父元素那繼承部分css屬性
選擇器的優(yōu)先級
ID選擇優(yōu)先級最高（id選擇器定義具有唯一性）
class選擇器次之（class選擇器可以多個）
元素選擇器再次之
其它選擇器優(yōu)先級主要根據(jù)定義的先后順序，最后定義的優(yōu)先級高
!important 加重選擇器的優(yōu)先級，添加在樣式規(guī)則之后，中間用空格隔開。
CSS選擇器命名規(guī)則
1：采用英文字母，數(shù)字以及"-" 和 "_" 命名
2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭
3：使用有意義的命名規(guī)范
常用CSS命名
header
頁頭
main
主體
footer
頁尾
nav
導(dǎo)航
sidebar
側(cè)欄
container
容器
column
欄目
title
標簽
menu
菜單
submenu
子菜單
*列舉常用命名，大家根據(jù)自身項目及團隊的規(guī)則命名
耐心學(xué)習(xí)基礎(chǔ)知識，基礎(chǔ)是蓋房的根基，必須打結(jié)實。
如果您覺得有用，記得在下方點贊、關(guān)注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。
每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢想的人一起成長！
重慶分公司
重慶分公司
