有没有办法告诉 html 元素忽略任何样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5863833/
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
Is there a way to tell an html element to ignore any stylesheets?
提问by Parris Varney
I'm attempting to add a drop down to a page that already has a global "select" style. Is there a way to tell the new select list to ignore the global style? There's about 1 to 2 zillion existing drop downs that use the global style, so I don't want refactor the existing html.
我正在尝试向已经具有全局“选择”样式的页面添加下拉列表。有没有办法告诉新的选择列表忽略全局样式？大约有 1 到 2 亿个使用全局样式的现有下拉列表，所以我不想重构现有的 html。
采纳答案by Kris Ivanov
there is no easy way to do what you are asking, one approach is to create a CSS class that resets all appropriate attributes for a specific element and its children to make it more complete, here is a good starting point Element specific CSS reset
没有简单的方法可以完成您的要求，一种方法是创建一个 CSS 类，该类为特定元素及其子元素重置所有适当的属性以使其更完整，这是一个很好的起点元素特定的 CSS 重置
回答by Gabriele Petrioli
Assuming you could set a unique class or id on that element you could use the (limited browser support) property alland set it to unsetor initial
假设您可以在该元素上设置唯一的类或 id，您可以使用（有限浏览器支持）属性all并将其设置为unset或initial
Something like
就像是
<div class="ignore-css"><div>
and
和
.ignore-css{all:unset;}
回答by Topera
You can override another style using "!important", like this:
您可以使用“!important”覆盖另一种样式，如下所示：
a {color: red !important}
Or using a more specific selector:
或者使用更具体的选择器：
* // a=0 b=0 c=0 -> specificity = 0
LI // a=0 b=0 c=1 -> specificity = 1
UL LI // a=0 b=0 c=2 -> specificity = 2
UL OL+LI // a=0 b=0 c=3 -> specificity = 3
H1 + *[REL=up] // a=0 b=1 c=1 -> specificity = 11
UL OL LI.red // a=0 b=1 c=3 -> specificity = 13
LI.red.level // a=0 b=2 c=1 -> specificity = 21
#x34y // a=1 b=0 c=0 -> specificity = 100
#s12:not(FOO) // a=1 b=0 c=1 -> specificity = 101
See specificity documentation here.
请参阅此处的特异性文档。
UPDATE:
更新：
For example:
例如：
You have a global rule:
你有一个全局规则：
a {color: blue}
But you want your links red. So, you must create the rule below:
但是你希望你的链接是红色的。因此，您必须创建以下规则：
a {color: red !important}
If the global rule also has "!important", you must use a more specific selector: So, you may use:
如果全局规则也有“!important”，则必须使用更具体的选择器：因此，您可以使用：
body a {color: red !important}
回答by Marty
I'd be most inclined to narrow down your selectors. By that I mean..
我最倾向于缩小选择器的范围。我的意思是..
<div class="newbox">
<a href="#">I want this to be different.</a>
</div>
CSS:
CSS：
div.newbox a
{
color: #888;
text-decoration: none;
}
回答by locrizak
you can eaither add cascading styles like:
您可以添加级联样式，例如：
#id1 .class1 select
or
或者
.class:width:200px !important
The !important will make it use the style you want rather than the global one, but if you have to overwrite it it can get a little tricky. You have to use a combination of both.
!important 将使它使用您想要的样式而不是全局样式，但是如果您必须覆盖它，它会变得有点棘手。您必须结合使用两者。
回答by Din Sahovic
Or you could just...
或者你可以只是...
<div class="global-css">
<div class="ignore-css">
<div class="important-css">
......
</div>
</div>
</div>
where
在哪里
.global-css{
vertical-align: middle;
}
.ignore-css
{
all:unset;
}
.important-css{
vertical-align:left !important;
}
