Question

所以我试图仅使用类foo定位来自ol的直接子项的顶级列表项。我想让它们变红。

ol.foo>li {
  color: red;
}

<html>

<head>
  <title>test</title>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <ol class='foo'>
    <li>section 1</li>
    <li>section 2
      <ol>
        <li>step 1</li>
        <li>step 2</li>
        <li>step 3</li>
      </ol>
    </li>
    <li>section 3</li>
    <li>section 4</li>
  </ol>
  <ol>
    <li>item 1</li>
    <li>item 2</li>
  </ol>
</body>

</html>

Answer 1

您的第一个li的颜色将继承到其他列表项。

此处的其他答案是使用黑色来解决此问题。

这是一种解决方案，可让您在不必定义其他颜色的情况下获得所需的效果。

＆＃13;

ol.foo li {
  color: initial;
}

ol.foo > li {
  color: red;
}

＆＃13;

<html>

<head>
  <title>test</title>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <ol class='foo'>
    <li>section 1</li>
    <li>section 2
      <ol>
        <li>step 1</li>
        <li>step 2</li>
        <li>step 3</li>
      </ol>
    </li>
    <li>section 3</li>
    <li>section 4</li>
  </ol>
  <ol>
    <li>item 1</li>
    <li>item 2</li>
  </ol>
</body>

</html>

＆＃13;

Answer 2

一种方法

ol.foo>li {
  color: red;
}

ol.foo>li>ol{
  color: black;
}

<html>

<head>
  <title>test</title>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <ol class='foo'>
    <li>section 1</li>
    <li>section 2
      <ol>
        <li>step 1</li>
        <li>step 2</li>
        <li>step 3</li>
      </ol>
    </li>
    <li>section 3</li>
    <li>section 4</li>
  </ol>
  <ol>
    <li>item 1</li>
    <li>item 2</li>
  </ol>
</body>

</html>

Answer 3

您可能需要添加第二个选择器才能将其更改回来，因为没有预先存在的规则来指示颜色：

ol.foo>li {
  color: red;
}
ol.foo > li ol li {
  color: black;
}

我如何针对特定班级的孩子？

3 个答案: