1. 偽類(lèi) & 偽元素
- 偽類(lèi)和偽元素用來(lái)修飾不在文檔樹(shù)中的部分
- 偽類(lèi)：用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式
- 偽元素：用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式
2. 偽類(lèi)
偽類(lèi)詳解圖：
偽類(lèi).png
狀態(tài)
-
:link選擇未訪(fǎng)問(wèn)的鏈接 -
:visited選擇已訪(fǎng)問(wèn)的鏈接 -
:hover選擇鼠標(biāo)指針浮動(dòng)在其上的元素 -
:active選擇活動(dòng)的鏈接 -
:focus選擇獲取焦點(diǎn)的輸入字段
注意：a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后
結(jié)構(gòu)
-
not
否定偽類(lèi)，用于匹配不符合參數(shù)選擇器的元素
HTML:
<div class="div-type">我不會(huì)變色</div>
<div> 我會(huì)變成橙色</div>
<div class="div-type">我不會(huì)變色</div>
<div>我會(huì)變成橙色</div>
CSS:
div:not(.div-type) {
color: orange;
}
-
first-child
匹配元素的第一個(gè)子元素
HTML:
<div>
<div>我會(huì)變成藍(lán)色</div>
<div>我不會(huì)變成藍(lán)色</div>
</div>
CSS:
div:first-child{
color: blue;
}
last-child
匹配元素的最后一個(gè)子元素， 與first-child用法類(lèi)似first-of-type
匹配屬于其父元素的首個(gè)特定類(lèi)型的子元素的每個(gè)元素
HTML
<ul>
<li>這里的文本是橙色的。。。<span>我是第一個(gè)li 的子元素，所以我的文本是橙色的</span></li>
<li>一些文本 </li>
<li>一些文本</li>
</ul>
CSS
li:first-of-type {
color: orange;
}
-
last-of-type
匹配元素的最后一個(gè)子元素， 與first-of-type用法類(lèi)似 -
:nth-child
根據(jù)元素的位置匹配一個(gè)或者多個(gè)元素，它接受一個(gè)an+b形式的參數(shù)，an+b匹配到的元素示例如下：- 1n+0，或n，匹配每一個(gè)子元素
- 2n+0，或2n，匹配位置為2、4、6、8…的子元素
- 2n+1匹配位置為1、3、5、7…的子元素
- 3n+4匹配位置為4、7、10、13…的子元素
-
:nth-last-child
與:nth-child相似，不同之處在于它是從最后一個(gè)子元素開(kāi)始計(jì)數(shù)的 -
:nth-of-type
與:nth-child相似，不同之處在于它是只匹配特定類(lèi)型的元素
HTML:
<article>
<h1>我是標(biāo)題</h1>
<p>一些文本</p>
<p>這里的文本是橙色的</p>
</article>
CSS:
p:nth-of-type(2) {
color: orange;
}
-
:nth-last-type
與:nth-of-type相似，不同之處在于它是從最后一個(gè)子元素開(kāi)始計(jì)數(shù)的 -
:only-child
當(dāng)元素是其父元素中唯一一個(gè)子元素時(shí)，:only-child匹配該元素 -
:only-of-type
當(dāng)元素是其父元素中唯一一個(gè)特定類(lèi)型的子元素時(shí)，:only-child匹配該元素 -
target
當(dāng)URL帶有錨名稱(chēng)，指向文檔內(nèi)某個(gè)具體的元素時(shí)，:target匹配該元素
表單相關(guān)
-
checked
匹配被選中的 input 元素，這個(gè) input 元素包括 radio 和 checkbox
如下，當(dāng)復(fù)選框被選中時(shí)，與其相鄰的<label>元素的背景會(huì)變成黃色
HTML:
<input type="checkbox"/>
<label>正確</label>
CSS:
input:checked + label {
background: yellow;
}
-
disabled
匹配禁用的表單元素.如下，被禁用input輸入框的透明度會(huì)變成50%
HTML:
<input type="text" disabled/>
CSS:
:disabled {
opacity: .5;
}
3. 偽元素
偽元素詳解圖：
偽元素.png
-
::before/:before
在被選元素前插入內(nèi)容
HTML:
<h1>World</h1>
CSS:
h1:before {
content: "Hello ";
}
-
::after/:after
在被元素后插入內(nèi)容 -
::first-letter/:first-letter
匹配元素中文本的首字母,被修飾的首字母不在文檔樹(shù)中 -
::first-line/:first-line
匹配元素中第一行的文本。這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中 -
::selection
匹配用戶(hù)被用戶(hù)選中或者處于高亮狀態(tài)的部分 -
::placeholder
匹配占位符的文本，只有元素設(shè)置了placeholder屬性時(shí)，該偽元素才能生效
