仅样式父列表

Question

我有以下有序列表：

<ol>
    <li>
        <span>Title</span>

        <ol>
            <li>Info</li>
            <li>Info</li>
        </ol>
    </li>
</ol>

对于 CSS，我只需要将样式应用到父项 li，因此只有 1. Title 而不是子项 ol。我该怎么做？

我试过以下方法：

body > ol > li {
    /* Styling here */
}

和

body > ol > li > span {
    /* Styling here */
}

但都没有达到预期的效果。

body > ol > li {
  font-weight: bold;
  font-size: 20px;
}


/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

<body>
  <ol>
    <li>
      <span>Title</span>
      <ol>
        <li>Info</li>
        <li>Info</li>
      </ol>
    </li>
  </ol>
</body>

Fiddle

Answer 1

我将此 CSS 添加到您的代码中：

span + ol {
  font-weight: initial;
  font-size: initial;
}

body > ol > li {
  font-weight: bold;
  font-size: 20px;
}

span + ol {
  font-weight: initial;
  font-size: initial;
}

/* Additional styling */
ol { counter-reset: item; }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

<body>
  <ol>
    <li>
      <span>Title</span>
      <ol>
        <li>Info</li>
        <li>Info</li>
      </ol>
    </li>
  </ol>
</body>

Fiddle

Answer 2

我想唯一的解决办法是在 child ol 上手动重置样式，如下所示：

ol ol {
  /* Reset styling */
}

Fiddle

Answer 3

如果我正确理解你想要达到的目的，你需要声明

body > ol > li:first-child { color: #FFF; }
body > ol > li:first-child > ol { color:#000; }

参见示例：https://jsfiddle.net/6mhajeLf/4/

Answer 4

虽然 Blaze Sahlzen 有最佳答案，但这里有另一个可能的解决方案：

https://jsfiddle.net/6mhajeLf/6/

通过向不需要加粗的项目添加 class 并使用 !important 来完成。有点脏，但是可以用。

.not-bold {
  font-weight:300 !important;
}

仅样式父列表

Styling only parent list

html

css

css-selectors

html-lists