<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 第一个 */ /* ul li:first-child { pink; }
/* 最后一个 */ /* ul li:last-child { deeppink; } */ /* nth-child(n) 要第几个 n 就是是几 */ /* ul li:nth-child(8) { lightpink; } */ /* even 选择的全部偶数 */ /* ul li:nth-child(even) { pink; } */ /* odd 选择的全部奇数 */ /* ul li:nth-child(odd) { hotpink; } */ /* n 是公式 但是 n 从0 开始计算 */ /* ul li:nth-child(n) { pink; } */ /* 2n 是偶数 */ /* ul li:nth-child(2n) { pink; } */ /* 2n+1 是奇数 */ /* ul li:nth-child(2n + 1) { skyblue; } */ /* 5n 选择第 0 5 15 20 ... 5 的倍数*/ /* ul li:nth-child(4n) { purple; } */ /* n+5 就是从第5个开始往后面选择 包含第5个*/ /* ul li:nth-child(n+5) { pink; } */ /* -n+5 就是从第5个开始往前面选择 包含第5个*/ ul li:nth-child(-n+5) { background-color: pink; } </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> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> <li>36</li> <li>37</li> <li>38</li> <li>39</li> <li>40</li> <li>41</li> <li>42</li> <li>43</li> <li>44</li> <li>45</li> <li>46</li> <li>47</li> <li>48</li> <li>49</li> <li>50</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>nth-of-child</title> <style> /* div :nth-child(1) { pink; } div :nth-child(2) { purple; } */ /* of-type 选择指定类型的元素 */ div span:first-of-type { background-color: purple; } div span:nth-of-type(2) { background-color: red; } div span:last-of-type { background-color: skyblue; } </style> </head>
<body> <div> <p>我是一个p</p> <span>我是span</span> <span>我是span</span> <span>我是span</span> <span>我是span</span> </div> </body>
</html>