如何覆盖在伪元素上设置的 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17828393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I override CSS set on a pseudo element?
提问by frequent
I know that has been asked before, but I find no clean way of overriding this CSS:
我知道之前有人问过这个问题，但我没有找到覆盖这个 CSS 的干净方法：
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-searchon the element, but can add my own class, like:
我需要离开ui-input-search元素，但可以添加我自己的类，例如：
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
问题：
是否有一种简单的方法可以删除“伪 css”而不必逐行覆盖 CSS？
Thanks!
谢谢！
回答by Sacha
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
据我所知，除了覆盖所有属性之外别无他法。样式是在元素上定义的，它们不会因为另一个针对该元素的选择器而消失。
If you only want to remove the pseudo element from the page you can do content: none.
如果您只想从页面中删除伪元素，您可以执行content: none.
Added from comments below:
从下面的评论中添加：
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
content: "" 和 content: none 的区别在于 content: "" 产生一个没有内容的伪元素（即一个空的伪元素），而 content: none 完全阻止了伪元素的产生。
回答by Ganesh
Here content: "";doesn't affect at all if you want to remove that pseudo you have to use content:none;it will remove previously added pseudo content.
content: "";如果您想删除该伪内容，则这里根本不会影响您必须使用content:none;它会删除以前添加的伪内容。
content:none;
If that doesn't help you can also try :
如果这没有帮助，您也可以尝试：
display:none;
if still, it doesn't work then you could try the below, but I neversuggest you use !important
如果仍然无效，那么您可以尝试以下操作，但我从不建议您使用!important
display:none !important;
here is working jsfiddle
这是工作jsfiddle
