Day15结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
li:first-child{
background-color: red;
}
li:last-child{
background-color: green;
}
li:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
伪类选择器的公式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器的公式写法</title>
<style>
/* 偶数行 */
li:nth-child(2n){
background-color: red;
}
/* 奇数行 */
li:nth-child(2n-1){
background-color: green;
}
/* 5以后得行 */
li:nth-child(n+5){
background-color: blueviolet;
}
/* 5以前的行 */
li:nth-child(-n+5){
background-color: firebrick;
}
/* 2的倍数行 */
li:nth-child(2n){
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号