css中選擇器有:1、簡(jiǎn)單選擇器;2、屬性選擇器;3、組合選擇器;4、偽類選擇器;5、偽元素選擇器;6、多重選擇器。
本文操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。
CSS選擇器常見的有哪幾種?
一、簡(jiǎn)單選擇器 Simple Selectors
選擇器 | 含義 |
---|---|
* | 通用元素選擇器,匹配任何元素 |
E | 標(biāo)簽選擇器,匹配所有使用E標(biāo)簽的元素 |
.info | class選擇器,匹配所有class屬性中包含info的元素 |
#footer | id選擇器,匹配所有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 個(gè)相鄰元素 |
四、偽類 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 | 匹配父元素的第一個(gè)子元素li |
li:last-child | 匹配父元素的最后一個(gè)子元素li |
li:nth-child(n) | 匹配父元素的第n個(gè)子元素li(odd奇數(shù),even偶數(shù)) |
五、偽元素 Pseudo-elements
選擇器 | 含義 |
---|---|
E::before | 在E元素內(nèi)創(chuàng)建一個(gè)子元素,插入生成的內(nèi)容作為偽元素,放在最前面 |
E::after | 在E元素內(nèi)創(chuàng)建一個(gè)子元素,插入生成的內(nèi)容作為偽元素,放在最后面 |
E::selection | 應(yīng)用于文檔中被用戶高亮的部分(比如使用鼠標(biāo)選中的部分) |
E::first-letter | 匹配E元素的第一個(gè)字母第一行的第一個(gè)字母 |
E::first-line | 匹配E元素的第一行 |
六、多重選擇器 Multiple Selectors
在HTML中,我們有時(shí)會(huì)對(duì)同一個(gè)標(biāo)簽賦予多個(gè)class名稱,如:
<p class="one two"></p>而在CSS里面則可能同時(shí)選擇多個(gè)class,像是:
.one .two{} /*兩個(gè) class 中有空格*/ .one.two{} /*兩個(gè) class 中沒有空格*/ .one, .two{} /*兩個(gè) class 中出現(xiàn)逗號(hào)*/這三者
one.two{ }
,.one .two{ }
,或者是.one, .two{ }
有何區(qū)別?
- 第一個(gè)的 one 和 two 中間包含空格,意思是指,我必須要是在 one 裡面的 two,才會(huì)被選擇到。
- 第二個(gè)的 one 和 two 中間沒有包含空格,表示某個(gè)區(qū)塊必須同時(shí)具有 one 和 two 的 class 時(shí),才能被 CSS 所選擇到到。
- 第三個(gè)的 one 和 two 中間包含逗號(hào),意思是指 class 中有 one 或 two,都會(huì)被編輯器所選擇到。
簡(jiǎn)單來說,沒空格表示必須同時(shí)包含才會(huì)被選取;有空格表示后面的 class 被鑲嵌在前面的 class 中才會(huì)被選??;逗號(hào)則表示只要有其中一個(gè) class 就會(huì)被選取到 。
【推薦學(xué)習(xí):《css視頻教程》】