CSS 选择器
后代选择器
container p
#选择所有后代 container为父容器的选择器 p表示子元素选择器 中间用空格隔开
P:first-child
#选择后代第一个元素
P:last-child
#选择后代最后一个元素
P:nth-child(n)
#选择后代第n个选择
html代码:
<div class="container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
</div>
css代码:
.container { //选择父容器
background-color: red;
}
.container div{ //选择所有子元素
margin-top:10px;
}
.container div:first-child { //选择第一个子元素
background-color: blue;
}
.container div:last-child { //选择最后一个子元素
background-color: pink;
}
.container div:nth-child(2) { //选择第二个子元素
background-color: green;
}