html - CSS 属性应用于其参数之外的标签

标签 html css

<分区>

我可能理解错了,但是;我正在使用 <ol><li>制作图表。出于某种原因,我将 CSS 应用于 <ol>标签正在应用于 <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 属性,并且工作正常但是这个似乎不令人满意,我是在偷工减料吗?

最佳答案

OL是li容器,li自然默认继承ol样式属性,如果你没有样式,可以用浏览器inspect工具,computed tab,勾选Show inherited,浏览器默认处理继承来自父级的子样式属性。所以要解决这个问题,你只需要编写 li 特定的样式。如果您想覆盖所有继承,您将看到属性列表;-)祝您好运。附言在这里阅读:http://www.w3.org/TR/html4/struct/lists.html因为有些评论说你做错了,没有适当容器的文本只会让浏览器变得糟糕。 enter image description here

关于html - CSS 属性应用于其参数之外的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33716003/

相关文章:

html - 当 Flex 段落有多行或较长的单词而不是一行时,它的右边缘会占用更多空间

html - 一些悬停操作后 CSS UL LI 菜单不起作用

html - 从带有文本的 div 底部删除填充

javascript - 带有 Meteor 的 Malihu jQuery 自定义滚动条不显示

php - 从列表中添加/删除元素,然后将更改保存到 MySQL

Javascript 遍历变量

css - 将多个 Div 保持在一个容器的中心。页脚也卡在中间

python - 如何在抓取时获取html页面中的评论?

javascript - 使用选择框和 url 哈希过滤时 jQuery 同位素问题

html - 如何使用 CSS 在输入元素后添加换行符?