歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線：400-099-8848

CSS 挑選器
發(fā)布時(shí)間：2025-10-20 文章來源：本站  瀏覽次數(shù)：58

CSS 選擇器是 CSS 中最基礎(chǔ)且最重要的概念之一，它用于“選擇”您想要設(shè)置樣式的 HTML 元素。簡略挑選器

  • 星號 —— *
    • 通用挑選器，能夠挑選任何的元素
  • 類型挑選器｜type selector —— div svg|a
    • 也叫做 type selector, 也便是說它挑選的是元素中的 tagName (標(biāo)簽名) 特點(diǎn)
    • tagName 也是咱們平常常用的的挑選器
    • 可是因?yàn)?nbsp;HTML 也是有命名空間的，它主要有三個：HTML、SVG、MathML
    • 假如咱們想選 SVG 或許 MathML 里邊特定的元素，咱們就有必要要用到單豎線 | ，CSS挑選器里邊單豎線是一個命名空間的分隔符，而HTML 里邊命名空間分隔符是 冒號 : 。然后前面提到的命名空間是需要 @namespace 來聲明的，他們是合作運(yùn)用的，可是這個命名空間的運(yùn)用不是很頻繁，它的存在僅僅為了一個齊備性考慮，HTML 和 SVG當(dāng)中僅有一個堆疊的元素名就只有一個 a
    • 所以咱們能夠以為，類型挑選器便是一個簡略的文本字符串即可
  • 類挑選器｜c(diǎn)lass selector —— .class-name
    • 以 . 初的挑選器便是 class 挑選器，也是經(jīng)典之一
    • 它會挑選一個 class，咱們也能夠用空格做分隔符來擬定多個 class 的
    • 這個 .class 只需匹配中其間一個就能夠了
  • ID 挑選器｜id selector —— #id
    • 以 # 初加上 ID 名選中一個 ID
    • 這個是嚴(yán)厲匹配的
    • ID 里邊是能夠加減號或許是其他符號的
  • 特點(diǎn)挑選器｜attribute selector —— [attr=value]
    • 它包括了 class 特點(diǎn)挑選器和 id 挑選器
    • 這個挑選器的完整語法便是 attr=value，等于前面是特點(diǎn)名，后邊是特點(diǎn)值
    • 這兒邊的等號前面能夠加 ～ 就表明像 class 相同，能夠支撐拿空格分隔的值的序列：attr~=value
    • 假如在等號前面加單豎線，表明這個特點(diǎn)以這個值初即可：attr|=value
    • 假如咱們對優(yōu)先級沒有特別要求的話，咱們理論上是能夠用特點(diǎn)挑選器來代替 class 挑選器和 id 挑選器的
  • 偽類 —— :hover
    • 以 : 初的，它主要是一些特點(diǎn)的特別狀況
    • 這個跟咱們寫的 HTML 沒有聯(lián)系，八成來自于交互和作用
    • 一些偽類挑選器是帶有函數(shù)的偽類挑選器，這些咱們都是能夠去運(yùn)用偽類來解決的
  • 偽元素挑選器 —— ::before
    • 一般來說是以 :: 雙冒號初的
    • 實(shí)踐上是支撐運(yùn)用單冒號的，可是咱們發(fā)起雙冒號這個寫法
    • 因?yàn)樵蹅兡軌蛞谎劬涂闯鲞@個是偽元素挑選器，和偽類區(qū)別開來
    • 偽元素屬于選中一些本來不存在的元素
    • 假如咱們不挑選它們，這個地方就不存在這個元素了，挑選后就會多了一個元素

復(fù)合挑選器

  • <簡略挑選器><簡略挑選器><簡略挑選器>
  • * 或則 div 有必要寫在前面

首要復(fù)合挑選器是以多個簡略挑選器構(gòu)成的，只需把簡略挑選器挨著寫就變成一個復(fù)合挑選器了。它的語義便是咱們選中的元素有必要一起 match 幾個簡略挑選器，形成了 “與” 的聯(lián)系。

雜亂挑選器

復(fù)合挑選器中心用連接符就能夠變成雜亂挑選器了，雜亂挑選器是針對一個元素的結(jié)構(gòu)來進(jìn)行挑選的。

  • <復(fù)合挑選器> <復(fù)合挑選器> —— 后代挑選器，單個元素有必要要有空格左邊的一個父級節(jié)點(diǎn)或許先人節(jié)點(diǎn)
  • <復(fù)合挑選器> ">" <復(fù)合挑選器> —— 父子挑選器，有必要是元素直接的上級父元素
  • <復(fù)合挑選器> "~" <復(fù)合挑選器> —— 鄰接聯(lián)系挑選器
  • <復(fù)合挑選器> "+" <復(fù)合挑選器> —— 鄰接聯(lián)系挑選器
  • <復(fù)合挑選器> "||" <復(fù)合挑選器> —— 雙豎線是 Selector Level 4 才有的，當(dāng)咱們做表格的時(shí)分能夠選中每一個列


CSS 偽類

偽類其實(shí)是一類十分多的內(nèi)容的簡略挑選器。

鏈接/行為

  • :any-link —— 能夠匹配任何的超鏈接
  • :link —— 還沒有拜訪過的超鏈接
  • :link :visited —— 匹配所有被拜訪過的超鏈接
  • :hover —— 用戶鼠標(biāo)放在元素上之后的狀況，之前是只能對超鏈接收效，可是現(xiàn)在是能夠在許多元素中運(yùn)用了
  • :active —— 之前也是只對超鏈接收效的，點(diǎn)擊之后當(dāng)前的鏈接就會收效
  • :focus —— 便是焦點(diǎn)在這個元素中的狀況，一般用于 input 標(biāo)簽，其實(shí)任何能夠取得焦點(diǎn)的元素都能夠運(yùn)用
  • :target —— 鏈接到當(dāng)前的方針，這個不是給超鏈接用的，是給錨點(diǎn)的a 標(biāo)簽運(yùn)用的，便是當(dāng)前的 HASH指向了當(dāng)前的a 標(biāo)簽的話就會激活target 偽類

一旦運(yùn)用了:link 或許:visited 之后，咱們就再也無法對這個元素的文字色彩之外的特點(diǎn)進(jìn)行更改。為什么要這樣規(guī)劃呢？因?yàn)橐坏┰蹅冞\(yùn)用了 layout 相關(guān)的特點(diǎn)，比如說咱們給:visited 的尺寸加大一點(diǎn)，它就會影響排班。這樣咱們就能夠經(jīng)過 JavaScript 的 API 去獲取這個鏈接是否被拜訪過了。可是假如咱們能取得鏈接是否被拜訪過了，那么咱們就能夠知道用戶拜訪過那些網(wǎng)站了，這個對于閱讀器的安全性來說是一個致命打擊。所以這兒也提醒一下咱們，不要以為做一些表現(xiàn)性的東西與安全沒有任何聯(lián)系，其實(shí)安全性是一個綜合的考量。CSS 它也能造成安全漏洞的。

樹結(jié)構(gòu)

  • :empty —— 這個元素是否有子元素
  • :nth-child() —— 是父元素的第幾個兒子（child）
  • :nth-last-child() —— 與nth-child 相同，只不過從后往前數(shù)
  • :first-child :last-child :only-child

:nth-child 是一個十分雜亂的偽類，里邊支撐一種語法，比如說能夠在括號里邊寫奇偶event 或許odd，也能夠?qū)?N+1、3N-1，這個就會分別匹配到整數(shù)的形態(tài)。因?yàn)檫@個是一個比較雜亂的挑選器，咱們就不要在里邊寫過于雜亂的表達(dá)式了，只用它來處理一下奇偶，逢3個多1個，逢4個多1個等等這種表達(dá)式。

其實(shí)empty 、nth-last-child、last-child、only-child 這兩個挑選器，是破壞了咱們之前在 《完成中學(xué)習(xí)閱讀器原理》中的提到的 CSS 核算的時(shí)機(jī)問題。咱們能夠幻想一下，當(dāng)咱們在開始標(biāo)簽核算的時(shí)分，必定不知道它有沒有子標(biāo)簽。empty 影響不是特別大，可是last-child 的這個聯(lián)系其實(shí)仍是影響蠻大的。所以閱讀在完成這些的時(shí)分是做了特別處理的，要么便是閱讀器完成的不是特別好，要么便是閱讀器要消耗更大的性能來得以完成。所以主張?jiān)蹅儽M量避免大量運(yùn)用這些。

邏輯型

  • :not 偽類 —— 主流閱讀器只支撐簡略挑選器的序列（復(fù)合挑選器）咱們是沒有辦法在里邊寫雜亂挑選器的語法的
  • :where :has —— 在 CSS Level 4 加入了這兩個十分強(qiáng)大了邏輯型偽類

這兒仍是想溫馨主張一下咱們，不主張?jiān)蹅儼烟暨x器寫的過于雜亂，咱們許多時(shí)分都能夠多加一點(diǎn) class 去解決的。假如咱們的挑選器寫的過于雜亂，某種程度上意味著 HTML 結(jié)構(gòu)寫的不合理。咱們不可是為了給閱讀器工程省費(fèi)事，也不可是為了性能，而是為了咱們本身的代碼結(jié)構(gòu)考慮，所以咱們不應(yīng)該呈現(xiàn)過于雜亂的挑選器。

CSS 偽元素

總共分為 4 種

  • ::before
  • ::after
  • ::first-line
  • ::first-letter

::before 和::after 是在元素的內(nèi)容的前和后，刺進(jìn)一個偽元素。一旦應(yīng)用了 before 和 after 的特點(diǎn)，declaration（聲明）里邊就能夠?qū)懸粋�叫做content 的特點(diǎn)（一般元素是沒有辦法寫 content 的特點(diǎn)的）。content 的特點(diǎn)就像一個真正的 DOM 元素相同，能夠去生成盒，能夠參加后續(xù)的排版和烘托了。所以咱們能夠給他聲明border、background等這樣的特點(diǎn)。

能夠理解為：偽元素向界面上增加了一個不存在的元素。

::first-line 和::first-letter 的機(jī)制就不相同了。這兩個其實(shí)本來就存在 content 之中。他們顧名思義便是 選中“榜首行” 和選中 “榜首個字母”。它們 不是一個不存在的元素，是把一部分的文本括了起來讓咱們能夠?qū)λM(jìn)行一些處理。

before 和 after

在咱們概念里，咱們能夠以為帶有 before 偽元素的挑選器，會給他實(shí)踐選中的元素的內(nèi)容前面增加了一個元素，咱們只需要經(jīng)過他的 content 特點(diǎn)為它增加文本內(nèi)容即可。（這兒咱們也能夠給偽元素賦予content: '' 為空的）所以咱們能夠任何的給 before 和 after 指定 display 特點(diǎn)，和不同元素相同比較自由的。

咱們在完成一些組建的時(shí)分，也會常常運(yùn)用這種不污染 DOM 樹，可是能實(shí)踐發(fā)明視覺作用的方式來給頁面增加一些修飾性的內(nèi)容。

<div>
  <::before/>
  content content content content
  content content content content
  content content content content
  content content content content
  <::after/>
div>

first-letter 和 first-line

first-letter 相當(dāng)于咱們有一個元素把內(nèi)容里邊的榜首個字母給括了起來。這個first-letter 咱們是能夠恣意聲明各種不同的特點(diǎn)的，可是咱們是無法改動它的 content 的。咱們應(yīng)該都看到過報(bào)紙上的榜首個字母會比較大，然后會游離出來的作用，這個在 CSS 里邊咱們就能夠用::first-letter的偽元素挑選器了。運(yùn)用這個來完成比較用 JavaScript 來完成就會愈加安穩(wěn)和代碼愈加高雅一些。

<div>
  <::first-letter>c::first-letter>ontent content content content
  content content content content
  content content content content
  content content content content
div>

first-line 是針對排版之后的line，其實(shí)跟咱們源碼里邊的first line 沒有任何的聯(lián)系的。假如說咱們的閱讀器供給的烘托的寬度不同，first-line 在兩個環(huán)境里邊它終括住的元素?cái)?shù)量就不相同多了。所以咱們用這個挑選器的時(shí)分需要去根據(jù)需求的狀況運(yùn)用，很有可能在咱們開發(fā)機(jī)器上和用戶的機(jī)器上烘托出來的作用是不相同的！

上一條：營銷型網(wǎng)站建造策劃的八大...

下一條：如何剖析網(wǎng)站要害詞是否優(yōu)...