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