Question

我正在尝试仅设置第一个li元素的样式。当我用一个元素包装一个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元素被锚标记包围。由于每个li中只有一个a，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>

li：首先选择一切类型

1 个答案: