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

Question

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

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

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

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

在这一点上，我想我将创建一个新 ID 来解决导致我的代码无法工作的任何问题。

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

第 3 次编辑： 好的，这是 jsfiddle。出于某种原因，list-style-type: none 不适用于 fiddle，但它适用于我自己的代码。 . .奇怪。

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

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

Answer 1

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

Answer 2

尝试使用此方法将 css 仅应用于直系子项

#parent > li

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

Answer 3

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

div {
    border: 1px solid red;
}


div.child {
    border: 0;
}