如何清除子元素中的所有样式？答案

【问题标题】：How do I clear all styles from a child element?如何清除子元素中的所有样式？
【发布时间】：2015-04-04 14:34:39
【问题描述】：

我正在使用下拉菜单，但我无法从子菜单中删除某些样式。父元素有一个border-right: 1px，但我不希望子元素有任何边框，将其设置为border: 0px 不会做任何事情。有没有办法从某些东西中清除所有继承的样式？

编辑：好的，这是我尝试过的一些代码：

parent {
  border-right: 1px solid lightgrey;
   }

parent child {
  border: 0px 0px 0px 0px !important;
  }

此时我想我将创建一个新 ID 来解决导致我的代码无法工作的任何问题。

第二次编辑：不，创建 ID 或类也不起作用。这段代码真的想要那个边框。 . .

第三次编辑：好的，这是jsfiddle。出于某种原因，list-style-type: none 无法使用小提琴，但它可以在我自己的代码中使用。 . .很奇怪。

第 4 次编辑： Ana 指出了 list-style-type 的问题，我在复制代码时忽略了它。但是边界问题仍然存在。我将颜色更改为红色，以便更容易看到。

最终编辑：安娜回答了！我当时是个笨蛋，将border: 0px 应用到 UL 而不是它所属的 IL。谢谢安娜！

【问题讨论】：

您需要显示标记以及 css 才能找到问题的根源。你用过 jsfiddle.net 吗？这是共享代码的好方法，以便人们可以帮助您。
正确，标记。对不起。我不太了解 jsfiddle.net 的事情。它与本网站使用的代码框有何不同？（将创建 jsfiddle）
JSFiddle 允许您动态编辑代码并准确预览它在浏览器中的呈现方式。它还为您提供了一个独特的位置来放置您的标记、css 和 js。您发布的代码不是“可运行的”，因为没有标记并且您的类编写不正确。
border 属性通常不会被继承，并且在您的示例中也不会被继承。您在哪里看到子菜单的边框？我没有看到它，您在列表项上只有边框-屏幕截图i.imgur.com/cSi8yiM.png 至于list-style-type: none 不起作用，它确实适用于您设置的一个无序列表（.nav-tabs）。它不适用于子菜单，因为您没有对其进行设置。
如果您想要的是内部列表项上没有边框，那么您将在错误的位置重置边框 - 您将 border: 0 设置在 .sub-menu 上，什么时候可以使用 @ 987654332@。顺便说一句，由于继承，您没有边框，您拥有它是因为您在.nav-tabs（.nav-tabs li 规则）内的所有列表项上明确设置了它。而且您不需要在所有列表项上设置它，只需在内部项上重置它 - 请参阅@sdcr 提供的小提琴

【解决方案1】：

尝试使用它仅将 css 应用于直接子级

#parent > li

如果它被继承，请尝试使用 !important 覆盖父级的 css

【讨论】：

【解决方案2】：

将 !important 添加到样式中。所以你的新css将是border:0px !important;

【讨论】：

【解决方案3】：

为了清除继承的样式，您必须通过对感兴趣的元素应用更具体的规则来覆盖规则。阅读“css 特异性”

div {
    border: 1px solid red;
}


div.child {
    border: 0;
}

【讨论】：