溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS選擇器常見的有哪幾種

發(fā)布時間:2021-07-05 09:24:59 來源:億速云 閱讀:246 作者:小新 欄目:web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS選擇器常見的有哪幾種,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

css中選擇器有:1、簡單選擇器;2、屬性選擇器;3、組合選擇器;4、偽類選擇器;5、偽元素選擇器;6、多重選擇器。

本文操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。

CSS選擇器常見的有哪幾種?

一、簡單選擇器 Simple Selectors
選擇器含義
*通用元素選擇器,匹配任何元素
E標(biāo)簽選擇器,匹配所有使用E標(biāo)簽的元素
.infoclass選擇器,匹配所有class屬性中包含info的元素
#footerid選擇器,匹配所有id屬性等于footer的元素
二、屬性選擇器 Attribute Selectors
選擇器含義
[atrr]選擇包含 attr 屬性的所有元素,不論 attr 的值為何
[attr=val][attr=val] 僅選擇 attr 屬性被賦值為 val 的所有元素
三、組合選擇器 Combinators
選擇器含義
A, B選中匹配 A 或/和 B 的元素
A B選中匹配 B 且為匹配 A 的元素的后代元素(A B之間空格分開)
A > B選中匹配 B 且為匹配 A 的元素的直接子元素
A + B選中匹配 B 且為匹配 A 的元素的下一相鄰元素
A ~ B選中匹配 B 且為匹配 A 的元素的下 N 個相鄰元素
四、偽類 Pseudo-classes
選擇器含義
a:link匹配所有未被點(diǎn)擊的鏈接
a:visited匹配所有已被點(diǎn)擊的鏈接
a:hover匹配鼠標(biāo)懸停其上的a元素
a:active匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的a元素
li:first-child匹配父元素的第一個子元素li
li:last-child匹配父元素的最后一個子元素li
li:nth-child(n)匹配父元素的第n個子元素li(odd奇數(shù),even偶數(shù))
五、偽元素 Pseudo-elements
選擇器含義
E::before在E元素內(nèi)創(chuàng)建一個子元素,插入生成的內(nèi)容作為偽元素,放在最前面
E::after在E元素內(nèi)創(chuàng)建一個子元素,插入生成的內(nèi)容作為偽元素,放在最后面
E::selection應(yīng)用于文檔中被用戶高亮的部分(比如使用鼠標(biāo)選中的部分)
E::first-letter匹配E元素的第一個字母第一行的第一個字母
E::first-line匹配E元素的第一行
六、多重選擇器  Multiple Selectors

在HTML中,我們有時會對同一個標(biāo)簽賦予多個class名稱,如:

<p class="one two"></p>

而在CSS里面則可能同時選擇多個class,像是:

.one .two{}    /*兩個 class 中有空格*/
.one.two{}     /*兩個 class 中沒有空格*/
.one, .two{}   /*兩個 class 中出現(xiàn)逗號*/

這三者 one.two{ },.one .two{ },或者是.one, .two{ }有何區(qū)別?

  • 第一個的 one 和 two 中間包含空格,意思是指,我必須要是在 one 裡面的 two,才會被選擇到。

  • 第二個的 one 和 two 中間沒有包含空格,表示某個區(qū)塊必須同時具有 one 和 two 的 class 時,才能被 CSS 所選擇到到。

  • 第三個的 one 和 two 中間包含逗號,意思是指 class 中有 one 或 two,都會被編輯器所選擇到。

簡單來說,沒空格表示必須同時包含才會被選取;有空格表示后面的 class 被鑲嵌在前面的 class 中才會被選取;逗號則表示只要有其中一個 class 就會被選取到 。

關(guān)于“CSS選擇器常見的有哪幾種”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI