常见的层级关系包括:父子、后代、兄弟和相邻
使用相邻元素实现列表中间加入划分符号
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默认的padding和margin*/
*{padding:0;margin:0}
/*去除列表项默认符号*/
ul{list-style-type:none;}
li+li{border-left:2px solid red;}
</style>
</head>
<body>
<ul>
<li>第1个元素</li>
<li>第2个元素</li>
<li>第3个元素</li>
<li>第4个元素</li>
<li>第5个元素</li>
<li>第6个元素</li>
</ul>
</body>
</html>
“li+li”使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。“li+li{border-left:2px solid red;}”达到在两个li元素之间添加一个边框的效果。
这是一个非常棒的技巧,在实际开发中如果我们想要在两个元素之间实现什么效果(border、margin等),我们会经常用到这个技巧!大家一定要重点掌握。
如下经常用到