在开发中,我们经常会碰到给除了第一个元素后面的所以元素添加一个外边距。
效果:
方法1:使用 + 和 ~ 选择器
.content div+div{
background-color: green;
margin-left: 10px;
}
.content div~div{
background-color: green;
margin-left: 10px;
}
+选择器:
div+p:选择第一个指定的元素之后(不是内部)紧跟的元素。
div~p:选择div元素之后的每个p元素,两个元素必须拥有相同的父元素,p元素不必直接紧随div元素。
方法二:使用伪类选择器:not 和 :first-child
.content div:not(:first-child){
background-color: green;
margin-left: 10px;
}
说明:first-child用于选取父元素的首个子元素,not是选择器匹配非指定元素。