## 一、偽類
### 1、定義
> The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
偽類存在的意義是為了通過(guò)選擇器，格式化DOM樹以外的信息以及不能被常規(guī)CSS選擇器獲取到的信息。
### 2、要點(diǎn)
- 格式化DOM樹以外的信息。比如： `<a>` 標(biāo)簽的`:link`、`:visited` 等。這些信息不存在于DOM樹中。
- 不能被常規(guī)CSS選擇器獲取到的信息。比如：要獲取第一個(gè)子元素，我們無(wú)法用常規(guī)的CSS選擇器獲取，但可以通過(guò) `:first-child` 來(lái)獲取到。
## 二、偽元素
### 1、定義
> Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
偽元素可以創(chuàng)建一些文檔語(yǔ)言無(wú)法創(chuàng)建的虛擬元素。比如：文檔語(yǔ)言沒(méi)有一種機(jī)制可以描述元素內(nèi)容的第一個(gè)字母或第一行，但偽元素可以做到(`::first-letter`、`::first-line`)。同時(shí)，偽元素還可以創(chuàng)建源文檔不存在的內(nèi)容，比如使用 `::before` 或 `::after`。
### 2、常見的偽元素選擇器
- `::first-letter` 選擇元素文本的第一個(gè)字（母）
- `::first-line` 選擇元素文本的第一行
- `::before` 在元素內(nèi)容的最前面添加新內(nèi)容
- `::after` 在元素內(nèi)容的最后面添加新內(nèi)容
- `::selection`匹配被用戶選中或者處于高亮狀態(tài)的部分
- `::placeholder`匹配占位符的文本，只有元素設(shè)置了 placeholder 屬性時(shí)，該偽元素才能生效
## 三、偽類和偽元素的區(qū)別
#### 1、偽類是為了彌補(bǔ)CSS選擇器的不足，用來(lái)更方便地獲取信息
```
<ul>
<li>test1</li>
<li>test2</li>
</ul>
li:first-child {
color: #f00;
}
// 選擇器不能直接選取第一個(gè)子元素
// 偽類彌補(bǔ)了選擇器的不足
```
#### 2、偽元素本質(zhì)上是創(chuàng)建了一個(gè)虛擬容器(元素)，我們可以在其中添加內(nèi)容或樣式
```
.first-letter {
color: #f00;
}
<p>
<span class="first-letter">H</span>ello, World
</p>
```
上面的代碼其實(shí)就是：
```
p::first-letter {
color: #f00;
}
```
除了上面這個(gè)本質(zhì)區(qū)別以外，在CSS3中，偽類用單冒號(hào):表示；而偽元素用雙冒號(hào)::表示。
## 四、偽類和偽元素的主要用法
### 1、偽類
#### （1）`:first-child` 匹配第一個(gè)子元素
```
li:first-child {
color: #f00;
}
<ul>
<li>test1</li>
<li>test2</li>
</ul>
```
#### （2）`:last-child` 匹配最后一個(gè)子元素
```
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
li:last-child {
color: #f00;
}
```
#### （3）`:first-of-type` 匹配屬于其父元素的第一個(gè)特定類型的子元素
```
p:first-of-type {
color: #f00;
}
<div>
<h1>h1文本</h1>
<p>p文本</p>
</div>
```
#### （4）`last-of-type` 匹配屬于其父元素的最后一個(gè)特定類型的子元素
```
h1:last-of-type {
color: #f00;
}
<div>
<h1>h1文本</h1>
<h1>h1文本2</h1>
<p>p文本</p>
</div>
```
### 2、偽元素
#### （1）`::before` 在被選元素之前插入內(nèi)容；`::after` 在被選元素之后插入內(nèi)容
##### 清除浮動(dòng)
```
.clearAll::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearAll {
zoom : 1;
}
```
##### 畫分割線
```
* {
padding: 0;
margin: 0;
}
.spliter::before,
.spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割線</p>
</body>
```
##### 計(jì)數(shù)器
使用CSS實(shí)現(xiàn)計(jì)數(shù)器，用到的屬性有：
- counter-reset: 屬性設(shè)置某個(gè)選擇器出現(xiàn)次數(shù)的計(jì)數(shù)器的值。默認(rèn)為 0
- counter-increment: 屬性設(shè)置某個(gè)選取器每次出現(xiàn)的計(jì)數(shù)器增量。默認(rèn)增量是 1
- content: 插入生成內(nèi)容
```
.chooses {
counter-reset: letters;
}
.chooses input:checked {
counter-increment: letters;
}
.choose span::after {
content: counter(letters);
}
<div class="chooses">
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
<input type="checkbox">d
<input type="checkbox">e
<input type="checkbox">f
<input type="checkbox">g
<input type="checkbox">h
<input type="checkbox">i
<input type="checkbox">j
</div>
<p class="choose">我選擇了<span></span>個(gè)字母</p>
```
#### （2）`::first-letter` 匹配元素中文本的首字母
##### ::first-letter巧妙控制羊角符號(hào)
```
.price {
display: inline-block;
color: #FF5802;
}
.price::first-letter {
margin-right: 5px;
font-size: xx-large;
vertical-align: -2px;
}
原價(jià)：<span class="price">￥399</span>
```
##### ::before偽元素與::first-letter偽元素共用一個(gè)選擇器
```
p::before {
content: '驗(yàn)證：';
}
p::first-letter {
color: #f00;
}
<p>一個(gè)選擇器可以同時(shí)使用多個(gè)偽元素</p>
```
## 五、css優(yōu)先級(jí)
### 1、不同級(jí)別
- 屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素內(nèi)的樣式
- id選擇器
- 類選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義或繼承
**總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性**
### 2、同一級(jí)別
同一級(jí)別中后寫的會(huì)覆蓋先寫的樣式
### 3、優(yōu)先級(jí)算法（多個(gè)級(jí)別的組合）
- !important 優(yōu)先級(jí)最高
- 行內(nèi)樣式的權(quán)值為 1000
- ID 選擇器的權(quán)值為 100
- 類選擇器、屬性選擇器、偽類選擇器的權(quán)值為 10
- 元素選擇器、關(guān)系選擇器、偽元素選擇器的權(quán)值為 1
- 通配符選擇器的權(quán)重為 0
```
div.test {
background-color:#00f;
width:100px;
height: 100px;
}
.test.test2 {
background-color:#f00;
width:100px;
height: 100px;
}
<div class="test test2"></div>
```
根據(jù)優(yōu)先級(jí)算法中的規(guī)則對(duì)應(yīng)做加法，比較權(quán)值，如果權(quán)值相同那就后面的覆蓋前面的，如果不同，權(quán)值大的覆蓋權(quán)值小的。`div.test` 的權(quán)值是1+10=11，而 `.test.test2` 的權(quán)值是10+10=20，所以div會(huì)應(yīng)用 `.test.test2` 變成紅色
要點(diǎn)：
- !important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較”四位數(shù)“
- 優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式
- 繼承得來(lái)的屬性，其優(yōu)先級(jí)最低
**!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性**
## 六、CSS選擇器
### 1. 子代選擇器
標(biāo)簽嵌套只有一層關(guān)系
```
div > a {
color: red;
}
```
### 2. 后代選擇器
標(biāo)簽嵌套多層關(guān)系（包含一層）
```
div a {
color: red;
}
```
### 3. 交集選擇器
```
交集選擇器,相交的部分就是要設(shè)置屬性值的標(biāo)簽
1,格式:
選擇器1選擇器2...{
屬性:值;
}
2,注意點(diǎn):
(1),選擇器之間沒(méi)有任何的連接符號(hào)
(2),選擇器可以是標(biāo)簽名稱,也可以是id、class名稱
(3),交集選擇器僅僅是了解
```
```
p.para1 {
color: red;
}
```
### 4.并集選擇器
```
并集選擇器
1,格式:
選擇器1,選擇器2,...{
屬性:值;
}
2,注意點(diǎn):
(1),選擇器之間利用,連接
(2),選擇器可以是標(biāo)簽名稱,也可以是id、class名稱
```
```
.ht,.para{
color: red;
}
```
### 5. 兄弟選擇器
```
兄弟選擇器,只選中同級(jí)的標(biāo)簽
1,相鄰兄弟選擇(css2)
格式:
選擇器1+選擇器2{
屬性:值;
}
注意點(diǎn):
(1),相鄰選擇器必須用+鏈接
(2),相鄰選擇器只能選中緊跟后邊的那個(gè)標(biāo)簽,不能選中被隔開的標(biāo)簽
2,通用兄弟選擇器(css3),指定選擇器后邊特定的所有選擇器都被選中
格式:
選擇器1~選擇器2{
屬性:值;
}
```
```
h1+p{
color: red;
}
h1~p{
color: red;
}
```
- 前言
- 一、css垂直居中的幾種實(shí)現(xiàn)方法
- 二、簡(jiǎn)單說(shuō)一下盒模型，說(shuō)下如何利用BFC解決外邊距重疊的問(wèn)題
- 三、說(shuō)一說(shuō)產(chǎn)生塌陷的原因以及清除浮動(dòng)的幾種方法
- 四、偽類和偽元素的區(qū)別？聊一下css選擇器的優(yōu)先級(jí)
- 五、css中的過(guò)渡和動(dòng)畫效果了解嗎
- 六、彈性盒模型了解嗎
- 七、簡(jiǎn)單說(shuō)下BOM和DOM的區(qū)別
- 八、如何解決瀏覽器的兼容性問(wèn)題？瀏覽器調(diào)優(yōu)都用到過(guò)哪些方法
- 九、之前寫過(guò)h5嗎？有遇到過(guò)哪些兼容性問(wèn)題？說(shuō)下怎么解決的
- 十、h5是如何做移動(dòng)端適配的？折行的時(shí)候如何實(shí)現(xiàn)不斷行
- 十一、聊一聊js中實(shí)現(xiàn)數(shù)組拷貝的常用方法
- 十二、聊聊js中的數(shù)據(jù)類型，如何用js實(shí)現(xiàn)一個(gè)對(duì)象的深拷貝
- 十三、偽數(shù)組和數(shù)組的區(qū)別？相互轉(zhuǎn)化的方法有哪些
- 十四、請(qǐng)介紹Js中有哪些循環(huán)遍歷的方法，關(guān)于數(shù)組常用的方法有哪些
- 十五、js中的reduce了解嗎？都用他解決過(guò)什么問(wèn)題
- 十六、事件冒泡和捕獲的執(zhí)行順序了解嗎？什么是事件委托
- 十七、call和apply的區(qū)別是什么？caller和callee的區(qū)別有哪些
- 十八、javascript中的this都有哪些用法
- 十九、怎么理解js中的原型鏈？如何實(shí)現(xiàn)繼承？實(shí)現(xiàn)繼承常用的方式有哪些
- 二十、聊一聊js的作用域和作用域鏈
- 二十一、js的閉包了解嗎？閉包的常見用法說(shuō)一下
- 二十二、setTimeout和setInterval的運(yùn)行機(jī)制了解嗎
- 二十三、函數(shù)的柯里化了解嗎？說(shuō)下函數(shù)柯里化應(yīng)用的場(chǎng)景
- 二十四、用js寫一個(gè)ajax的原生實(shí)現(xiàn)方法
- 二十五、js如何實(shí)現(xiàn)跨域？聊一聊你之前用到過(guò)的方法
- 二十六、聊一下cookie、session和token三者的區(qū)別及使用
- 二十七、用js實(shí)現(xiàn)一下數(shù)組去重和排序，有哪些方法可以實(shí)現(xiàn)
- 二十八、寫一個(gè)方法，統(tǒng)計(jì)一下html文檔的元素包括元素的數(shù)量
- 二十九、用js實(shí)現(xiàn)一個(gè)省市級(jí)聯(lián)效果
- 三十、用js實(shí)現(xiàn)一個(gè)輪播圖效果，簡(jiǎn)單說(shuō)下原理
- 三十一、請(qǐng)你實(shí)現(xiàn)一個(gè)大文件上傳和斷點(diǎn)續(xù)傳
- 三十二、什么是模塊化開發(fā)？談下AMD、CMD、CommonJs和ES6的區(qū)別
- 三十三、es6了解嗎？說(shuō)幾個(gè)常見的新特性，set和weakSet的區(qū)別是什么
- 三十四、解構(gòu)賦值的用法了解嗎？如何實(shí)現(xiàn)對(duì)象和數(shù)組的嵌套和重命名
- 三十五、談?wù)勀銓?duì)promise的用法和理解
- 三十六、談?wù)勀銓?duì)es6中的Generator函數(shù)的認(rèn)識(shí)
- 三十七、談一下async-await的實(shí)現(xiàn)原理
- 三十八、用js實(shí)現(xiàn)一下觀察者模式？簡(jiǎn)單說(shuō)一下原理
- 三十九、了解JavaScript中的裝飾器嗎？聊一下JS中的getter與setter的用法
- 四十、聊一下正則表達(dá)式里的常見用法