领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

使用:first-child, :nth-child()的一些注意事项

nixiaole 2024-11-21 19:07:20 知识剖析 13 ℃


以p标签为例

(1) 使用p:first-child生效要满足两个条件：

1. `p`被同一个父元素包裹
2.  该父元素的第一个元素就是`p`元素

(2)同理，使用p:last-child生效要满足两个条件：

 1. `p`被同一个父元素包裹
 2. 该父元素的最后一个元素就是`p`元素

(3)p:nth-child(), p:nth-last-child()使用有以下几点注意：

1. 括号内的序号都是从1开始的，0是无效的
2. 与`p`所在同一个父元素的所有元素都有占位，所以会出现跳号的情况（例子中 p:nth-child(5)不存在）

<!-- htm内容 -->
<body>
    <div>
      <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p>
      <span>插入的span</span>
    </div>
    <div>
      <span>插入的span</span>
      <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p>
    </div>
    <div>
      <p>1</p> <p>2</p> <p>3</p> <p>4</p>
      <span>插入的span</span>
      <p>5</p> <p>6</p>
    </div>
  </body>

// css内容
<style>
div { border: 1px solid #000; margin: 10px;  }
p:first-child { background: skyblue;  }
p:last-child { background: rgb(241, 241, 230);  }
p:nth-child(0) { color: yellowgreen;  }
p:nth-child(1) { color: red;  }
p:nth-last-child(1) { color: orange;  }
p:nth-last-child(0) { color: blue;  }
p:nth-child(5) {  color: pink;  }
span:nth-child(5) {  color: purple; }
</style>

Tags：

猜你喜欢

最近发表
标签列表