仅样式化父列表答案

【问题标题】：Styling only parent list仅样式化父列表
【发布时间】：2016-01-06 18:57:14
【问题描述】：

我有以下有序列表：

<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

【问题讨论】：

也许只是给列表元素一个类，例如 parent 类，然后设置该类的样式？
您的第二个选项也适用于您的 jsfiddle。
它只对你的父母
有效。

【解决方案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

【讨论】：

子级继承父级的 font-weight 和 font-size 属性。这就是您需要 Blaze Sahlzen 提出的解决方案的原因。

【解决方案2】：

我想唯一的解决方案是手动重置子 ol 的样式，如下所示：

ol ol {
  /* Reset styling */
}

Fiddle

【讨论】：

【解决方案3】：

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

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

查看示例：https://jsfiddle.net/6mhajeLf/4/

【讨论】：

【解决方案4】：

尽管 Blaze Sahlzen 有最佳答案，但这里有另一种可能的解决方案：

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

通过为不需要加粗的项目添加一个类并使用!important 来完成。有点脏，但可以。

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

【讨论】：