Question

我可能理解这个错误但是;我正在使用<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，以便'Take Care'被移动到OL之外的段落标签，我改变了它，因此段落标签将具有上面引用的OL属性，并且它工作正常但是这个似乎不满意，我是否正在切入角落？

Answer 1

OL是li容器，所以很自然地，li默认继承ol样式属性，如果你没有样式，你可以看到使用浏览器检查工具，计算选项卡和检查Show inherited，默认情况下该浏览器正在处理继承来自父级的子样式属性。所以要解决这个问题，你只需要编写具体的样式。如果你想覆盖所有继承，你会看到属性列表;-)祝你好运。附：在这里阅读：http://www.w3.org/TR/html4/struct/lists.html因为有些评论说你做错了，没有适当容器的文字只是制作浏览器butthurt。

Answer 2

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

<强>修正

为你的风格底部的li制作一个单独的CSS属性

li {

 font-weight: normal;
 margin: 0; }

这将覆盖继承的属性。

Answer 3

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

CSS属性应用于其参数之外的标记

3 个答案: