html - 为什么我不能覆盖现有的 :after and :before pseudo-elements?

Question

我有两个相同的 CSS 规则，但一个没有覆盖另一个。

我使用了 right 而不是 left 规则，但它不会覆盖 left 规则。另一方面 top 规则正在覆盖。我也使用了 !important 规则，但它没有做任何更改。

有什么办法可以改变吗？

示例网址:http://i.stack.imgur.com/cdGSM.png

.navigation-bar-wrapper:after, .navigation-bar-wrapper:before {
   top: -10px;
   right: 58px;
}

.navigation-bar-wrapper:after, .navigation-bar-wrapper:before {
   top: -10px;
   left: 14px; 
}

Answer 1

重要提示:不要使用 !important。

当您需要重置由另一个样式表设置的 CSS 规则时，请使用带有稍强选择器的 initial。如果您要添加的 CSS 的加载时间晚于您要覆盖的 CSS，请使用完全相同的选择器。

div.navigation-bar-wrapper:after,
div.navigation-bar-wrapper:before {
    top: -10px;
    left: initial;
    right: 22px;
}