前端 關於css選擇器

2022-08-27 13:21:10 字數 2392 閱讀 8091

css選擇器就好像表示式一樣,返回一組或者乙個html元素,後面的樣式宣告塊應用到返回的元素上。所以可以把css選擇器理解為某個或者某一類html元素的抽象的寫法。

在講具體的各種選擇器之前要提一下選擇器分組和選擇器組合的不同,選擇器分組是在各個選擇器之間加上逗號操作符,分組執行的是「或」操作,例如h1,h2 。選擇器組合實在個選擇器之間用空格或者其他+ 、>等符號連線,組合執行的是類似於只是類似於「與」的操作。任何選擇器都可以進行分組或者組合(只要有意義)。

再介紹乙個概念---詞列表:用空格分隔的一組單詞。(定語空格分開的是關鍵)

按類別分選擇器一共有8種:

1.元素選擇器,這種選擇器是最基本的選擇器,選擇器的寫法就是對應的html標籤,後面的宣告塊中的樣式應用到頁面中所有選擇器對應的標籤。

2.id選擇器,id選擇器的寫法是#id {},id的開頭只能是字母。返回的是頁面標籤中id值為選擇器指定值的標籤。id選擇器不能和id選擇器組合。

3.類選擇器,類選擇器的寫法是.開頭後面加類名,類名也只能是字母開頭,後面可以跟數字、字幕或者下劃線。這裡要說明的是在類選擇器和類選擇器進行組合的時候,它所返回的頁面元素是class屬性的詞列表中同時含有選擇器指定類名的元素。只含有乙個或者不是包含選擇器類名全部的不在返回之列。

4.屬性選擇器,屬性選擇器的寫法為裡面寫屬性名或者用運算子連線的屬性名和取值,例如[href]、[href$=.com],這表示選擇器選擇具有某個屬性或者同時該屬性取值為某個特殊值的標籤。具體分類如下:

[href] 表示選擇具有href屬性的標籤

[href=www.cnblogs.com] 表示選擇href屬性值為www.cnblogs.com的標籤

[href^=www]  表示選擇href屬性值以www開頭的標籤

[href$=.com]表示選擇href屬性值以.com結尾的標籤

[class~=button] 表示選擇class屬性值的詞列表中包含button的標籤

[class*=button]表示class屬性值字串中包含button字元的標籤,注意這要和~=有所區分

[lang |= en] |=這是一種特殊寫法,表示lang屬性值以en開頭或者en-開頭的標籤

以上寫法中屬性值沒有加引號,引號一般可以加也可以不加,但在屬性值為符號或者包含空格的時候必須要加引號,例如[href="#"]

屬性選擇器與屬性選擇器組合表示同時含有屬性的意思

5.偽類選擇器,偽類選擇器顧名思義假裝有個類,這是說乙個標籤的類不是顯示出現的,而是瀏覽器在後台悄悄維護的。這種類是在特定狀態或者操作下瀏覽器悄悄不可見的加給元素標籤的,要是選擇這類標籤就要用:來引用那個類名常量。例如a:link ,沒訪問過的a標籤瀏覽器都會偷偷加個link類給他,但在頁面上是看不到這個類名的,要引用到就要用:link,a:visited表示訪問過的a標籤。這麼來看,偽類可以理解為是元素選擇器的後置定語。link visisted這兩種是靜態偽類,就是瀏覽器悄悄新增修改了就不會再給你該回去了,這兩種偽類只能應用於a標籤,還有一種偽類可以應用到任何標籤,即動態偽類。動態偽類就是瀏覽器悄悄給你改過一次類名後還可以再根據情況改變多次。

動態偽類有:

:hover

:enabled

:disabled

:checked

其他靜態偽類(若通過dom介面修改了文件,原來的靜態偽類是否還使用有待驗證)

:first-child

:last-child

:nth-child(even)

:nth-last-child(even)

:only-child

:fist-of-type

:last-of-type

:nth-of-type(even)

:nth-last-of-type(even)

:only-of-type

偽類可以和偽類組合。

6.偽元素選擇器,又顧名思義了,就是假裝有個標籤元素,瀏覽器偷偷給你**你看不見他看得見的標籤。為了和偽類選擇器做區分,現在偽元素選擇器都用::雙冒號。

常見的偽元素選擇器有:

::first-letter

::first-line

::before

::after

7.後代選擇器 後代選擇器其實就是選擇器組合的應用

常見的後代選擇器:

1.h2 p 選擇器之間用空格連線,表示前面的所有後代中的後面元素

2.h2 > p 選擇器之間用大於號連線,表示直接子元素

3.h2~p 選擇器用~號連線,表示所有兄弟元素

4.h2+p 選擇器用+號連線,表示直接相連兄弟元素

最後關於選擇器特殊性的計算:

id選擇器 特殊性為100

類、屬性、偽類 特殊性為10

元素、偽元素特殊性為1

寫在行內的選擇器特殊性為1000

例如 h2.button {}的特殊性就是1+10=11

前端 css 選擇器

css 為了修飾頁面作用,讓頁面好看 css的引入方式 1,行內樣式 body裡面 2,內接樣式 在html裡面的 style 裡面 3,外接樣式 兩種 鏈結式 匯入式 優先順序 行內優先順序 最高 內接的優先順序 外接優先順序 引入 id 的優先順序 比 class 的優先順序要高 標籤選擇器 d...

關於CSS選擇器

通用選擇器 這個選擇器不經常用,看著省事,問題也有。標籤選擇器 html標籤都可以進行設定,但是常用的如ul,li,a標籤等最好還是給乙個class或者id,乙個頁面中如果有多個相同標籤,容易混淆。類選擇器 類選擇器用得比較多,也比較方便。同乙個類名可以賦給多個標籤,同樣設定了樣式也可以進行重複使用...

關於CSS選擇器

css選擇器是css規則的一部分,它能夠告訴瀏覽器,相應的html元素的樣式規則。id選擇器,類選擇器,元素選擇器 屬性選擇器 屬性選擇器只對存在屬性的html元素有效,常見標籤的href屬性 url a href 偽類和偽元素選擇器 article 組合器選擇器 important style行內...