Time: 20200131
動(dòng)態(tài)偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽類選擇器</title>
<style>
a:link{color: #666}
a:visited{color: #f00}
a:hover{color:#000}
a:active{color:#0f0}
</style>
</head>
<body>
<a href="">偽類選擇器</a>
<head></head>
</body>
</html>
通過標(biāo)簽后加不同的動(dòng)作過濾，會(huì)為相應(yīng)的動(dòng)作添加渲染效果。
其中：
- a:link 表示啥也不做時(shí)候的標(biāo)簽顏色
- a:visited 表示訪問過后的顏色
- a:hover 表示鼠標(biāo)滑上去的顏色
- a:active 表示點(diǎn)擊時(shí)的顏色
2.UI元素狀態(tài)偽類選擇器 -- 常用于表單
重點(diǎn)在于狀態(tài)。
什么是狀態(tài)？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽類選擇器</title>
<style>
input:enabled{background-color: #0f0;}
input:disabled{background-color: #ccc;}
</style>
</head>
<body>
<a href="">偽類選擇器</a>
<hr>
<input type="text"> <br/>
<input type="text" disabled>
</body>
</html>
比如，我們?yōu)?code><input>指定disabled，默認(rèn)是enabled。就可以根據(jù)狀態(tài)（形容詞）來篩選過濾，指定不同的樣式。
3.結(jié)構(gòu)偽類選擇器
CSS3新增的語法。
有11種結(jié)構(gòu)偽類選擇器。
-
first-child用于選擇某個(gè)元素的第一個(gè)子元素 -
last-child用于選擇某個(gè)元素的最后一個(gè)子元素 -
nth-child()用于選擇某個(gè)元素一個(gè)或者多個(gè)元素 -
nth-last-child()用于選擇某個(gè)元素一個(gè)或者多個(gè)元素，從這個(gè)元素的最后一個(gè)子元素開始算 -
nth-of-type()選擇指定的元素 -
nth-last-of-type()選擇指定的元素，從這個(gè)元素的最后一個(gè)子元素開始算 -
first-of-type：只計(jì)數(shù)同類元素 -
last-of-type：只計(jì)數(shù)同類元素，從后往前數(shù) -
only-child：只有一個(gè)子元素時(shí)才響應(yīng) -
only-of-type：該類型的子元素只有一個(gè)時(shí)才響應(yīng) -
empty：該子元素里面內(nèi)容為空時(shí)響應(yīng)
使用Emmet自動(dòng)生成HTML。比如：ul>10*li>a*1，可以生成：
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
先做一個(gè)基本的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>結(jié)構(gòu)偽類選擇器</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 100px auto;
padding: 10px;
}
.demo li {
float: left;
list-style: none;
padding: 2px; /*為li的盒模型添加內(nèi)邊距，使其不要那么擠*/
border: 1px solid #ccc; /* 加上這個(gè)會(huì)使得padding失效，但是外邊距可以用 */
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 50%;
background-color: #f36;
text-decoration: none; /*去除文字底下橫線*/
}
/* 清除浮動(dòng) */
.clearfix {
clear: both;
overflow: auto; /*讓里面的內(nèi)容可以撐開容器*/
}
</style>
</head>
<body>
<div class="demo clearfix">
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
</body>
</html>
效果如下：
截屏2020-01-31下午1.03.42.png
:first-child && :last-child
/* 操作第一個(gè)子元素 */
.demo li:first-child {
background-color: #0f0;
}
/* 操作最后一個(gè)子元素 */
.demo li:last-child {
background-color: rgb(192, 198, 255);
}
:nth-child()
/* 操作第幾個(gè)子元素 */
.demo li:nth-child(3) {
background-color: #0f0;
}
n表達(dá)式用法：
操作全部子元素
/* 操作全部子元素 */
.demo li:nth-child(n) {
background-color: #0f0;
}
操作偶數(shù)編號(hào)子元素
/* 操作全部子元素 */
.demo li:nth-child(2n) {
background-color: #0f0;
}
/* 等同 */
.demo li:nth-child(even) {
background-color: #0f0;
}
操作奇數(shù)編號(hào)子元素
/* 操作全部子元素 */
.demo li:nth-child(2n+1) {
background-color: #0f0;
}
/* 等同 */
.demo li:nth-child(odd) {
background-color: #0f0;
}
其實(shí)是從n=0開始，各種表達(dá)式都可以寫：
截屏2020-01-31下午1.16.48.png
這個(gè)就是：
.demo li:nth-child(4n+1) {
background-color: #0f0;
}
加出來的結(jié)果是下標(biāo)，下標(biāo)從1開始。
這種新的結(jié)構(gòu)偽類選擇器，非常便于操作。
:nth-last-child()
.demo li:nth-last-child(3) {
background-color: #0f0;
}
:nth-of-type()
同類型的子元素的第幾個(gè)。子元素不一定只有一種類型。
nth-child是不區(qū)分類型的。
:empty
當(dāng)子元素中的內(nèi)容為空時(shí)響應(yīng)。
這個(gè)不區(qū)分?jǐn)?shù)量。
END.
