Question

我有以下ul列表：

<ul class="list">
    <li>
        <ul>
            <li></li>
        </ul>
     </li>
     <li></li>
<ul>

如何将CSS样式应用于父li的上一个class="list"，而不是ul内的嵌套ul

Answer 1

您需要last-of-type和>

.list > li:last-of-type {
  color: red;
}

<ul class="list">
  <li>a
    <ul>
      <li>a</li>
    </ul>
  </li>
  <li>c</li>
</ul>

正如您所提到的那样，您需要li父级的最后一个元素，您使用last-of-type选择器，该选择器匹配其父级的特定类型的最后一个子元素。

其次，要仅匹配最外面的li而不是嵌套的一个，你使用子selecor >，在这种情况下说：匹配最后一个类型的直接子项具有名为.list

的类的元素的名称

您还想查看this。

Answer 2

试试这个

<强> demo

<强> CSS

ul.main > li > ul> li:first-child > a {
    background:green;
}

Answer 3

DIRECT CHILD SELECTOR（CSS3）：

ul.list >li:last-of-type{
   color:red;
}

<ul class="list">
    <li>Parent First Child
        <ul>
            <li>Child</li>
        </ul>
     </li>
     <li>Parent Another Child</li>
     <li>Parent Last Child</li>
<ul>

注意：>用于选择ul.list
的直接子项

以下是CSS Pseudo-classes

的详细信息

如何仅为第一个嵌套li应用last-child？

3 个答案: