用CSS重写儿童财产

  • 本文关键字:财产 重写 CSS css
  • 更新时间 :
  • 英文 :


我在<li>元素中有一个<div>元素(如代码片段所示(。<li>元素设置了cursor: pointer样式属性,我无法删除该嵌套<div>元素中的光标指针。

<li>不受我们控制 删除css,因为它来自第三方。

.container {
cursor: pointer
}
.local {
cursor: default !important
}
<ul>
<li class="container">
<div class="local"> Hello World </div>
</li>
</ul>

.container类在这里实际上无关紧要。碰巧它有一个显示cursor: pointer属性,但问题实际上是 - 什么覆盖了.local分类的<div>元素,无法呈现cursor: default属性。

回答这个问题的最好方法是查看浏览器开发人员工具上的元素和样式面板,看看这是在做什么。它会让你知道什么覆盖了它。

然后,可以通过增加特异性或更改重写它的代码来使用调整。但是,与.local类以及实际覆盖它的任何内容相比,特异性需要具有相关性。

编辑:在提供的示例中,您无需担心特异性,因为它们是不同的类。但是,我经常看到!important添加到规则中是一种懒惰的方式,可以覆盖示例中未复制的特定性问题。我认为这里也是这种情况,因为 OP 指出,"容器来自第三方"。因此,了解特异性规则将有助于解决问题。


您可以使用!important但这确实应该是最后的手段。但是,通过增加 CSS 特异性,您可以更好地长期服务。

目前,.container.local具有同等的权重。您可以通过以下方式提高特异性:使用 ID、引用更多层次结构、使用组合器等。然后,NEW 属性将根据 CSS 顺序覆盖以前的属性。

例如:

.element {
background: blue;
}
.element {
background: red;
}
// produces a red element

所以在这种情况下,你想增加特异性。您可以像这样轻松完成此操作:

.container {
cursor: pointer;
}
.container > .local {
cursor: default;
}
// where local is a DIRECT child of .container

最新更新