结构伪类选择器：不分组（不区分元素类型）

- 作者：霏梦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结构伪类选择器：不分组（不区分元素类型）</title>
    <style>
      body {
        width: 600px;
        text-align: center;
      }
      /* 匹配第一个子元素 */
      .h3-title > *:first-child {
        font-size: 30px;
        color: blueviolet;
      }
      .h3-title > .wsp:first-child {
        font-size: 30px;
        color: limegreen;
      }
      /* 最后一个元素 */
      .h3-title > :last-child {
        font-size: 40px;
        color: magenta;
      }
      /* 选第3个 */
      .h3-title > :nth-child(3) {
        border: 2px solid coral;
        background-color: cornflowerblue;
      }
      /* 只选择偶数单元格 2n or even */
      .h3-title > :nth-child(2n) {
        background-color: crimson;
      }
      /* 获取奇数单元格 odd or 2n-1 */
      .h3-title > :nth-child(2n-1) {
        font-size: 50px;
      }
      /* 从指定位置开始，选择剩下的所有元素 */
      .h3-title > .wsp:nth-child(n + 4) {
        color: goldenrod;
      }
      /* 只取前3 */
      .h3-title > .wsp:nth-child(-n + 3) {
        color: green;
      }
      /* 只取最后3个 */
      .h3-title > .wsp:nth-last-child(-n + 3) {
        background-color: greenyellow;
      }
      /* 取第8行 用倒数*/
      .h3-title > .wsp:nth-last-child(2) {
        background-color: rebeccapurple;
        font-size: 80px;
      }
    </style>
  </head>
  <body>
    <div class="h3-title">
      <div class="wsp">我是第1行</div>
      <div class="wsp">我是第2行</div>
      <div class="wsp">我是第3行</div>
      <div class="wsp">我是第4行</div>
      <div class="wsp">我是第5行</div>
      <div class="wsp">我是第6行</div>
      <div class="wsp">我是第7行</div>
      <div class="wsp">我是第8行</div>
      <div class="wsp">我是第9行</div>
    </div>
  </body>
</html>
- 作者：霏梦

相关文章
