淘先锋技术网

首页 1 2 3 4 5 6 7

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伪元素中分别添加数字和括号,完成样式调整。