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

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

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

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

復(fù)合挑選器

  • <簡(jiǎn)略挑選器><簡(jiǎn)略挑選器><簡(jiǎn)略挑選器>
  • * 或則 div 有必要寫(xiě)在前面

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

雜亂挑選器

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

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


CSS 偽類(lèi)

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

鏈接/行為

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

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

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

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

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

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

邏輯型

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

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

CSS 偽元素

總共分為 4 種

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

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

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

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

before 和 after

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

咱們?cè)谕瓿梢恍┙M建的時(shí)分，也會(huì)常常運(yùn)用這種不污染 DOM 樹(shù)，可是能實(shí)踐發(fā)明視覺(jué)作用的方式來(lái)給頁(yè)面增加一些修飾性的內(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)于咱們有一個(gè)元素把內(nèi)容里邊的榜首個(gè)字母給括了起來(lái)。這個(gè)first-letter 咱們是能夠恣意聲明各種不同的特點(diǎn)的，可是咱們是無(wú)法改動(dòng)它的 content 的。咱們應(yīng)該都看到過(guò)報(bào)紙上的榜首個(gè)字母會(huì)比較大，然后會(huì)游離出來(lái)的作用，這個(gè)在 CSS 里邊咱們就能夠用::first-letter的偽元素挑選器了。運(yùn)用這個(gè)來(lái)完成比較用 JavaScript 來(lái)完成就會(huì)愈加安穩(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 是針對(duì)排版之后的line，其實(shí)跟咱們?cè)创a里邊的first line 沒(méi)有任何的聯(lián)系的。假如說(shuō)咱們的閱讀器供給的烘托的寬度不同，first-line 在兩個(gè)環(huán)境里邊它終括住的元素?cái)?shù)量就不相同多了。所以咱們用這個(gè)挑選器的時(shí)分需要去根據(jù)需求的狀況運(yùn)用，很有可能在咱們開(kāi)發(fā)機(jī)器上和用戶的機(jī)器上烘托出來(lái)的作用是不相同的！

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

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