CSS相邻的元素,指的是在HTML文档中相邻的两个元素,CSS中提供了一些属性可以控制相邻元素的样式。
p + p { margin-top: 20px; }
上面这段代码意思是选中所有紧接在
元素后面的
元素,并将它们的margin-top设为20px。这样就可以达到让段落之间保持一定间隔的效果。
另一种常见的应用是在列表中。比如我们要对一个有序列表进行样式调整,让每个列表项前面显示数字,后面添加括号,并应用不同的颜色。代码如下:
li + li { margin-top: 10px; } ol { counter-reset: my-counter; } li { counter-increment: my-counter; } li:before { content: counter(my-counter) ". "; color: blue; } li:after { content: ")"; color: red; }
上面的代码先给每个列表项都加上了一个margin-top,这样可以让列表项之间保持一定间距。然后通过counter-reset和counter-increment属性对列表项进行编号,最后在before和after伪元素中分别添加数字和括号,完成样式调整。