資訊專欄INFORMATION COLUMN
摘要：二選擇器的基本意義根據(jù)一些特征，選中元素樹上的一批元素。四偽類選擇器樹結(jié)構(gòu)關(guān)系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節(jié)點(diǎn)的元素。表示焦點(diǎn)落在這個(gè)元素之上。用于選中瀏覽器的部分所指示的元素。
筆記說明
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：[email protected]。一、引言
本文講一講css選擇器的一些機(jī)制。二、選擇器的基本意義
根據(jù)一些特征，選中元素樹上的一批元素。
選擇器的結(jié)構(gòu)分類
簡(jiǎn)單選擇器：針對(duì)某一特征判斷是否選中元素。
復(fù)合選擇器：連續(xù)寫在一起的簡(jiǎn)單選擇器，針對(duì)元素自身特征選擇單個(gè)元素。
復(fù)雜選擇器：由“（空格）”“ >”“ ~”“ +”“ ||”等符號(hào)連接的復(fù)合選擇器，根據(jù)父元素或者前序元素檢查單個(gè)元素。
選擇器列表：由逗號(hào)分隔的復(fù)雜選擇器，表示“或”的關(guān)系。
三、簡(jiǎn)單選擇器 3.1、類型選擇器和全體選擇器svg 和 html 中都有 a 元素，若要想?yún)^(qū)分選擇 svg 中的 a 和 html 中的 a，就必須用帶命名空間的類型選擇器。
svg 元素在： http://www.w3.org/2000/svg 命名空間之下。
namespace
htmlname
如圖所示：
3.2、id 選擇器與 class 選擇器id 選擇器是 # 號(hào)后面跟隨 id 名，class 選擇器是 . 后面跟隨 class 名。
#myid {
stroke: blue;
stroke-width: 1;
}
.myclass {
font-size: 40px
}
3.3、屬性選擇器
四中形態(tài)
[att]：直接在方括號(hào)中放入屬性名，是檢查元素是否具有這個(gè)屬性。
[att=val]：精確匹配，檢查一個(gè)元素屬性的值是否是 val。
[att~=val]：多種匹配，檢查一個(gè)元素的值是否是若干值之一。
[att|=val]：開頭匹配，檢查一個(gè)元素的值是否是以 val 開頭，后面內(nèi)容不管。
四、偽類選擇器 4.1、樹結(jié)構(gòu)關(guān)系偽類選擇器:root：偽類表示樹的根元素。
:empty：偽類表示沒有子節(jié)點(diǎn)的元素。
:nth-child：
:nth-last-child：的區(qū)別僅僅是從后往前數(shù)。
:first-child :last-child：分別表示第一個(gè)和最后一個(gè)元素。
:only-child：選中唯一一個(gè)子元素。
4.2、鏈接與行為偽類選擇器:any-link：表示任意的鏈接，包括 a、area 和 link 標(biāo)簽都可能匹配到這個(gè)偽類。
:link：表示未訪問過的鏈接。
:visited：表示已經(jīng)訪問過的鏈接。
:hover：表示鼠標(biāo)懸停在上的元素。
:active：表示正在激活這個(gè)元素。
:focus：表示焦點(diǎn)落在這個(gè)元素之上。
:target：用于選中瀏覽器 URL 的 hash 部分所指示的元素。
4.3、邏輯偽類選擇器CSS 否定偽類 :not(X)，是以一個(gè)簡(jiǎn)單的以選擇器X為參數(shù)的功能性標(biāo)記函數(shù)。它匹配不符合參數(shù)選擇器X描述的元素。X不能包含另外一個(gè)否定選擇器。詳情鏈接
我是一個(gè)段落。
我好看極了！
我不是一個(gè)段落。
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* 類名不是 `.fancy` 的 元素 */
p:not(.fancy) {
color: green;
}
/* 非
元素 */
body :not(p) {
text-decoration: underline;
}
/* 非
或 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 類名不是 `.crazy` or `.fancy` 的元素 */
/* 注意，此語法尚未被較好地支持。 */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
結(jié)果如圖：（可以打開：https://codepen.io/pen/ 進(jìn)行代碼編寫，查看效果）
4.4、其它偽類選擇器
國際化：用于處理國際化和多語言問題。
dir
lang
音頻 / 視頻：用于區(qū)分音視頻播放狀態(tài)。
play
pause
時(shí)序：用于配合讀屏軟件等時(shí)序性客戶端的偽類。
current
past
future
表格：用于處理 table 的列的偽類。
nth-col
nth-last-col
個(gè)人總結(jié)
很多都沒有用過_(:3」∠)_。。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114676.html
摘要：二選擇器的基本意義根據(jù)一些特征，選中元素樹上的一批元素。四偽類選擇器樹結(jié)構(gòu)關(guān)系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節(jié)點(diǎn)的元素。表示焦點(diǎn)落在這個(gè)元素之上。用于選中瀏覽器的部分所指示的元素。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入wint...
摘要：二選擇器的基本意義根據(jù)一些特征，選中元素樹上的一批元素。四偽類選擇器樹結(jié)構(gòu)關(guān)系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節(jié)點(diǎn)的元素。表示焦點(diǎn)落在這個(gè)元素之上。用于選中瀏覽器的部分所指示的元素。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入wint...
摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
閱讀 663·2021-11-15 11:39
閱讀 2900·2021-10-08 10:04
閱讀 3264·2019-08-30 10:57
閱讀 3024·2019-08-26 13:25
閱讀 1906·2019-08-26 12:14
閱讀 2636·2019-08-23 15:27
閱讀 2996·2019-08-23 15:18
閱讀 1777·2019-08-23 14:26
