CSS属性应用于其参数之外的标签[重复]答案

【问题标题】：CSS attributes being applied to tags outside its parameter [duplicate]CSS属性应用于其参数之外的标签[重复]
【发布时间】：2015-11-15 03:13:50
【问题描述】：

我可能理解错了，但是；我正在使用<ol> 和<li> 制作图表。出于某种原因，我应用于<ol> 标签的 CSS 也被应用于<li> 标签，但不是全部，一些<li> CSS 属性也被应用，有点像它的收入属性从他们两个。有人可以解释一下原因和解决方法吗？

https://jsfiddle.net/fdo47tjv/

div.alb1 {
  background-color: rgba(255, 255, 255, 0.6);
  width: 20%;
  margin-left: 5%;
  margin-top: 15%;
  margin-bottom: 0px;
  margin-right: 0px;
  border-right: 40px solid black;
}
div.alb1 ol {
  text-decoration: underline;
  font-weight: bold;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  margin: 10px;
}
div.alb1 ol li {
  margin: 5px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
}

<body background="./resources/DSC_0146.jpg">

  <div class="alb1">
    <ol>Take Care
      <li>Over My Dead Body</li>
    </ol>
  </div>

</body>

经过一番折腾 我搞砸了并更改了 css 和 html，以便将“小心”移动到 OL 之外的段落标记，我对其进行了更改，因此段落标记将具有上面引用的 OL 属性，并且它工作正常但是这个好像不满意，是不是抄近路了？

【问题讨论】：

如果你的意思是text-decoration，那么它不是继承属性，所以你不能为后代“取消”它。
检查这个问题：stackoverflow.com/questions/1823341/… 导致w3.org/TR/CSS21/text.html#propdef-text-decoration The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
像这样将文本节点放在<ol> 标记内是无效的。您应该将您的标题放在列表之外或具有自己的样式属性的特殊 <li> 元素内。

标签： html css

【解决方案1】：

OL 是 li 容器，所以自然 li 默认继承 ol 样式属性，如果你没有样式，你可以看到浏览器检查工具，计算选项卡和检查显示继承，浏览器默认处理继承来自父级的子样式属性。所以要解决这个问题，你只需要编写 li 特定的样式。如果您想覆盖所有继承，您将看到属性列表；-) 祝您好运。附言在这里阅读：http://www.w3.org/TR/html4/struct/lists.html 因为正如某些 cmets 所说的那样，您做错了，没有适当容器的文本只会使浏览器变得笨拙。

【讨论】：

【解决方案2】：

正如其他用户所提到的，这是因为 li 将继承 ol 样式。

修复

在样式底部为 li 创建一个单独的 CSS 属性

li {

 font-weight: normal;
 margin: 0; }

这将覆盖继承的属性。

【讨论】：

【解决方案3】：

正在应用该样式，因为 <li> 是 <ol> 的一部分您可以在<ol> 标签中使用<span>，然后将样式应用于该<span>

【讨论】：

哦，好吧，有没有另一种方法可以在标题下添加一个列表？
@stanley 更新答案
将<span> 直接放入<ol> 是无效的。