<!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>
