CSS選擇器
基本選擇器
| 選擇器 | 名稱 | 說明 | CSS版本 |
|---|---|---|---|
* |
通用選擇器 | 選擇所有元素 | 2 |
#<id> |
id選擇器 | 選擇指定id屬性的元素 | 1 |
.<class> |
class選擇器 | 選擇指定class屬性的元素 | 1 |
<type> |
元素選擇器 | 選擇指定類型的元素 | 1 |
[attr] |
屬性選擇器 | 選擇指定attr屬性的元素 | 2~3 |
1. 通用選擇器
* 選擇器匹配所有 html 元素（包括<html> 和<body>標簽）曙砂。
* {
border: 1px solid red;
}
2. ID選擇器
通過對元素設(shè)置全局屬性 id柒桑，然后使用#id 值來選擇頁面唯一元素慰枕。
<p id="abc">
段落
</p>
#abc {
font-size: 20px;
}
3. 類選擇器
通過對元素設(shè)置全局屬性 class盟戏，然后使用.class 值選擇頁面一個或多個元素酸休。
<b class="abc">加粗</b>
<span class="abc">無</span>
.abc {
border: 1px solid red;
}
使用元素.class的形式乞巧，限定某種類型的元素口蝠。
b.abc {
border: 1px solid red;
}
4. 元素選擇器
直接使用元素名稱作為選擇器名器钟。
<p>
段落
</p>
p {
color: tansparent;
}
5. 屬性選擇器
屬性選擇器，直接通過兩個中括號里面包含屬性名即可妙蔗。
/**所需 CSS2 版本**/
[type] {
border: 1px solid #ddd;
}
匹配屬性值的屬性選擇器傲霸。
/**所需 CSS2 版本**/
[type="password"] {
border: 1px solid #ddd;
}
屬性值開頭匹配的屬性選擇器。
/**所需版本 CSS3 **/
[href^="http"] {
color: orange;
}
屬性值結(jié)尾匹配的屬性選擇器眉反。
/**所需版本 CSS3**/
[href$=".com"] {
color: orange;
}
屬性值包含指定字符的屬性選擇器昙啄。
/**所需版本 CSS3 **/
[href*="baidu"] {
color: orange;
}
屬性值具有多個值時，匹配具有其中一個值的屬性選擇器寸五。
/**所需版本 CSS2**/
[class~="edf"] {
font-size: 50px;
}
- 屬性只包含匹配值的會被選擇到梳凛。
- 屬性包含多個值，含有匹配值的會被選擇到梳杏。
屬性值具有多個值且使用-號連接符分割的其中一個值的屬性選擇器韧拒。
比如：<i lang="en-us">HTML5</i>
/**所需版本 CSS2**/
[lang|="en"] {
color: red;
}
復合選擇器
| 選擇器 | 名稱 | 說明 | CSS版本 |
|---|---|---|---|
s1,s2,s3... |
分組選擇器 | 選擇多個選擇器的選擇的元素 | 1 |
s1 s2 |
后代選擇器 | 選擇指定選擇器的后代元素 | 1 |
s1 > s2 |
子選擇器 | 選擇指定選擇器的子元素 | 2 |
s1 + s2 |
相鄰兄弟選擇器 | 選擇指定選擇器相鄰的元素 | 2 |
s1 ~ s2 |
普通兄弟選擇器 | 選擇指定選擇器后面的元素 | 3 |
將不同的選擇器進行組合形成新的特定匹配，我們稱為復合選擇器十性。
1.分組選擇器
將多個選擇器通過逗號分割叛溢，同時設(shè)置一組樣式。
p,b,i,span {
color: red;
}
不但可以分組元素選擇器劲适，還可以使用
ID選擇器楷掉、類選擇器、屬性選擇器混合使用。
2.后代選擇器
后代選擇器可以選擇父元素向下所有被選擇的元素痹扇，不在乎被選擇元素的層次深度。
p b {
color: red;
}
選擇
<p>元素內(nèi)部所有<b>元素砖顷。不在乎<b>的層次深度后代選擇器也可以混合使用
ID選擇器草雕、類選擇器鄙才、屬性選擇器。
3.子選擇器
子選擇器只能選擇父元素向下一級的元素促绵，不可以再往下選擇攒庵。
<ul>
<li>我是兒子</li>
<li>我是兒子</li>
<li>我是兒子</li>
</ul>
ul > li {
border: 1px solid red;
}
4.相鄰兄弟選擇器
相鄰兄弟選擇器匹配第一個元素后面相鄰的指定元素（與第一個元素同級）。
<div>
<p class="test">第一個段落</p>
<div>第一個div</div>
<p>第二個段落</p>
<div>第二個div</div>
<p>第三個段落</p>
<div>第三個div</div>
</div>
.test + div {
color: red;
}
只有
第一個div字體顏色會變成紅色
5.普通兄弟選擇器
普通兄弟選擇器匹配第一個元素后面所有的指定元素（與第一個元素同級）败晴。
<div>
<p class="test">第一個段落</p>
<div>第一個div</div>
<p>第二個段落</p>
<div>第二個div</div>
<p>第三個段落</p>
<div>第三個div</div>
</div>
p ~ b {
color: red;
}
第一個div浓冒、第二個div、第三個div字體顏色都會變成紅色尖坤。
偽元素選擇器
| 選擇器 | 名稱 | 說明 | CSS版本 |
|---|---|---|---|
::first-line |
偽元素選擇器 | 選擇塊級元素文本的首行 | 1 |
::first-letter |
偽元素選擇器 | 選擇塊級元素文本的首字母 | 1 |
::before |
偽元素選擇器 | 選擇元素之前插入內(nèi)容 | 2 |
::after |
偽元素選擇器 | 選擇元素之后插入內(nèi)容 | 2 |
::selection |
偽元素選擇器 | 當選擇文字時觸發(fā) | 3 |
偽選擇器分為兩種：偽類選擇器和偽元素選擇器
這兩種選擇器特性上比較容易混淆稳懒，在 CSS3 中為了區(qū)分，偽元素前置兩個冒號（::）慢味，偽類前置一個冒號（:）
個人理解：偽元素選擇器選擇的是文本內(nèi)容场梆，偽類選擇器選擇的是元素。
1.::first-line 塊級首行
::first-line {
color: red;
}
塊級元素比如
<p>纯路、<div>等的首行文本被選定或油。如果想限定某種元素，可以加上前置
p::first-line
2.::first-letter 塊級首字母
::first-letter {
color: red;
}
塊級元素的首字母（中文為首個中文字符）
3.::before 文本前插入
a::before {
content: '點擊-';
}
在文本前插入內(nèi)容
4.::after 文本后插入
a::after {
content: '-請進';
}
在文本后插入內(nèi)容
5.::selection
::selection{
color:red;
}
選擇選擇的文字
偽類選擇器
| 選擇器 | 名稱 | 說明 | CSS版本 |
|---|---|---|---|
:root |
根元素選擇器 | 選擇文檔中的根元素 | 3 |
:first-child |
子元素選擇器 | 選擇元素中第一個子元素 | 2 |
:last-child |
子元素選擇器 | 選擇元素中最后一個子元素 | 3 |
:nth-child(n) |
子元素選擇器 | 選擇指定N個子元素 | 3 |
:only-child |
子元素選擇器 | 選擇元素中唯一子元素 | 3 |
:only-of-type |
子元素選擇器 | 選擇指定類型的唯一子元素 | 3 |
nth-of-type(n) |
子元素選擇器 | 選擇指定N個子元素 | 3 |
:checked |
UI選擇器 | 選擇被選中input勾選元素 | 3 |
:enabled |
UI選擇器 | 選擇啟用狀態(tài)的元素 | 3 |
:disabled |
UI選擇器 | 選擇禁用狀態(tài)的元素 | 3 |
:valid |
UI選擇器 | 驗證有效選擇input元素 | 3 |
:invalid |
UI選擇器 | 驗證無效選擇input元素 | 3 |
:required |
UI選擇器 | 有required屬性選擇元素 | 3 |
:optional |
UI選擇器 | 無required屬性選擇元素 | 3 |
:default |
UI選擇器 | 選擇默認元素 | 3 |
:link |
動態(tài)選擇器 | 未訪問的超鏈接元素 | 1 |
:hover |
動態(tài)選擇器 | 懸停在超鏈接上的元素 | 2 |
:active |
動態(tài)選擇器 | 激活超鏈接上的元素 | 2 |
:visited |
動態(tài)選擇器 | 已訪問的超鏈接元素 | 1 |
:foucs |
動態(tài)選擇器 | 獲取焦點的元素 | 2 |
:not |
其他選擇器 | 否定選擇的元素 | 3 |
:empty |
其他選擇器 | 選擇沒有任何內(nèi)容的元素 | 3 |
:target |
其他選擇器 | 選取URL片段標識指向元素 | 3 |
:lang |
其他選擇器 | 選取包含lang屬性的元素 | 2 |
結(jié)構(gòu)性偽類
結(jié)構(gòu)性偽類選擇器能夠根據(jù)元素在文檔中的位置選擇元素驰唬。
1.根元素選擇器
:root{
border:1px solid red;
}
匹配文檔中的根元素顶岸，基本不怎么用，因為總是返回
<html>元素
2.子元素選擇器
ul > li:first-child{
color:red;
}
選擇
li元素叫编，條件：li的父元素下第一個子元素是li的那個li元素
ul > li:last-child{
color:red;
}
選擇
li元素辖佣，條件：li的父元素下最后一個子元素是li元素的那個li元素
以下html結(jié)構(gòu)li:fist-child與li:last-child都將不會有li元素被選擇到
<ul>
<p>首段內(nèi)容</p>
<li>第一個li</li>
<li>第二個li</li>
<li>第三個li</li>
<p>尾端內(nèi)容</p>
</ul>
ul > li:nth-child(2){
color:red;
}
選擇
li元素，條件：li的父元素下第二個子元素是li元素的那個li元素文本
第一個li的字體顏色將變?yōu)榧t色
/* 匹配奇數(shù)位元素 */
li:nth-of-child(odd)
/* 匹配偶數(shù)位元素 */
li:nth-of-child(even)
/* 匹配連續(xù)位置的元素 */
li:nth-of-child(an + b)
-
a表示周期的長度 -
n表示計數(shù)器（從0開始） -
b是偏移值
以下實例表示匹配第2搓逾、5卷谈、8、11位置的元素：
li:nth-of-child(3n + 2)
ul > li:nth-last-child(2){
color:red;
}
選擇
li元素霞篡，條件：li的父元素下倒數(shù)第二個子元素是li元素的那個li元素文本
第三個li的字體顏色將變?yōu)榧t色
ul > li:only-child{
color:red;
}
選擇
li元素世蔗，條件：li的父元素下僅有一個元素，且為li元素的那個li元素
以下html結(jié)構(gòu)中寇损，只有文本only child字體顏色會變?yōu)榧t色
<ul>
<li>only child</li>
</ul>
<ul>
<li>第一個子元素</li>
<li>第二個子元素</li>
</ul>
ul > li:only-of-type{
color:red;
}
選擇
li元素凸郑，條件：li的父元素下僅有一個li類型元素裳食；li的父元素下可以存在或不存在其它類型的元素矛市。以下
html結(jié)構(gòu)中，只有文本only-of-type的字體顏色會變成紅色诲祸。
<ul>
<li>only of type</li>
</ul>
<ul>
<li>only of type</li>
<p>p元素</p>
</ul>
<ul>
<li>第一個li元素</li>
<li>第二個li元素</li>
</ul>
<ul>
<li>第一個li元素</li>
<li>第二個li元素</li>
<p>p元素</p>
<p>p元素</p>
</ul>
ul > li:nth-of-type(2){
color:red;
}
選擇
li元素浊吏，條件：li的父元素下第二個元素是li元素的那個li元素而昨。
第二個li元素字體顏色會變成紅色
ul > li:nth-last-of-type(2){
color: red;
}
選擇
li元素，條件：li的父元素下倒數(shù)第二個元素是li元素的那個li元素找田。
第一個li元素字體顏色會變成紅色
UI偽類
UI偽類選擇器是根據(jù)元素的狀態(tài)匹配元素歌憨。
1.:checked
:checked{
display:none;
}
選擇
checked屬性值為true的input表單元素
2.:enabled和:disabled
:enabled {
border: 1px solid red;
}
選擇啟動狀態(tài)的表單元素
:disabled {
border: 1px solid red;
}
選擇禁用狀態(tài)的表單元素
3.:valid和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
選擇輸入驗證合法與不合法的表單元素
4.:required
:required{
border:1px solid blue;
}
選擇
require屬性為true的表單元素
5.:optional
:optional {
border:1px solid red;
}
選擇
select元素
6.:default
:default{
display:none;
}
從一組類似的元素中選擇默認元素。比如input被勾選的即默認的墩衙。
動態(tài)偽類
動態(tài)偽類選擇器根據(jù)條件的改變匹配元素务嫡。
1.:link
a:link{
color:blue;
}
:link表示未訪問過的超鏈接
2.:hover
a:hove{
color:orange;
}
:hover表示鼠標懸停在超鏈接上
3.:active
a:active{
color:red;
}
:active表示鼠標按下激活超鏈接時
4.:visited
a:visited{
color:gray;
}
:visited表示已訪問過的超鏈接
5.:focus
input:focus{
border:1px solid red;
}
:focus表示獲得焦點時
其它偽類
1.:not
a:not([href*="baidu"]) {
color: red;
}
否定選擇器，反選漆改。
2.:empty
:empty {
display: none;
}
匹配沒有任何內(nèi)容的元素心铃。
3.:target
:target {
color: red;
}
定位到錨點時，選擇此元素挫剑。
以下
html元素去扣，選擇元素為div元素
<a href="#1">1</a>
<a href="#2">2</a>
<div id="1">1target</div>
<div id="2">2target</div>
4.:lang
:lang(en) {
color: red;
}
選擇包含
lang屬性，屬性值前綴為en的元素樊破。和屬性選擇器匹配結(jié)果一致愉棱。
