CSS 问题：第一个子类、最后一个子项和独生子类伪类在列表上无法正常工作

下面的伪类不像我期望的那样工作:

first-child:每个div的第一个a应该有一个红色背景。
last-child:每个div的最后一个a应该有一个蓝色的背景
only-child:只有最后一个div的a应该有灰色背景，边框半径为60%，文本颜色为白色。

每个div("Two")中间的a应该使用绿色背景。

就像我之前说的，它不像我想要的那样工作，因为结果它显示了所有和灰色背景，边框半径为60%和白色文本(基本上是独生子女属性)。

我应该在我的代码中改变什么?

li {
list-style: none;
}
a {
padding: 10px;
display: inline-block;
background-color: green;
color: yellow;
text-decoration: none;
}
a:first-child {
background-color: red;
}
a:last-child {
background-color: blue;
}
a:only-child {
border-radius: 60%;
background-color: grey;
color: white;
}

<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Last one</a>
<!-- Background should be GREY, border radius at 60% and White text -->
</li>
</ul>
</div>

您理解错了，这里的a是li的子元素。-意思是无论你想应用什么，都应用于ul的子元素，即li。
ul li:fisrt-child。-ul li:last-child。-ul li:only-child.

li {
list-style: none;
}
a {
padding: 10px;
display: inline-block;
background-color: green;
color: yellow;
text-decoration: none;
}
ul li:first-child a {
background-color: red;
}
ul li:last-child a {
background-color: blue;
}
ul li:only-child a {
border-radius: 60%;
background-color: grey;
color: white;
}

<body>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Last one</a>
<!-- Background should be GREY, border radius at 60% and White text -->
</li>
</ul>
</div>
</body>

你应该用first-childlast-childonly-child代替li而不是a

li {
list-style: none;
}
a {
padding: 10px;
display: inline-block;
background-color: green;
color: yellow;
text-decoration: none;
}
ul li:first-child a {
background-color: red;
}
ul li:last-child a {
background-color: blue;
}
ul li:only-child a {
border-radius: 60%;
background-color: grey;
color: white;
}

<body>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">One</a>
<!-- Background should be RED and Yellow text -->
</li>
<li><a href="#">Two</a>
<!-- Background should be GREEN and Yellow text -->
</li>
<li><a href="#">Three</a>
<!-- Background should be BLUE and Yellow text -->
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Last one</a>
<!-- Background should be GREY, border radius at 60% and White text -->
</li>
</ul>
</div>
</body>

相关内容

最新更新

热门标签：