html - 李 :first-of-type selecting everything

Question

我试图只设置第一个 li 元素的样式。当我用 a 元素包裹 li 元素时，所有内容都被选中。这是我的 HTML:

<ul>
    <a href="#"><li class="box one"></li></a>
    <a href="#"><li class="box two"></li></a>
    <a href="#"><li class="box three"></li></a>
</ul>

和 CSS:

li:first-of-type {
    border-radius: 25px 0 0 25px;
}

.box {
    display: inline-block;
    height: 50px;
    width: 50px;
}

.one {
    background-color: cadetblue;
}

.two {
    background-color: crimson;
}

.three {
    background-color: darkorange;
}

关于为什么会发生这种情况的任何解释都是有帮助的。谢谢。

Answer 1

这是因为您的 li 元素被 anchor 标记包围了。由于每个 a 中只有一个 li，因此 li 始终是第一个类型。另外值得指出的是，ul 元素(也称为 ol)只能包裹 li 元素，不能包裹任何其他元素，以免您的 HTML 被无效。

试试这个:

<ul>
  <li class="box one"><a href="#">asd</a></li>
  <li class="box two"><a href="#">asdf</a></li>
  <li class="box three"><a href="#">asfd</a></li>
</ul>