我正在玩一个小的导航菜单和伪元素,我想知道为什么我创建的微小的浅橙色方块显示在第一个子元素上,而不是其他元素被复制并放入第n个元素时子(2)。
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
width: 627px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}

<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
&#13;
答案 0 :(得分:2)
由于
ul li:nth-child(2)::after
仅选择第二项
你需要
ul li:nth-child(n+2)::after
每个子
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(n+2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>