有没有办法告诉 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:23:03  来源:igfitidea点击:

Is there a way to tell an html element to ignore any stylesheets?

htmlcss

提问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并将其设置为unsetinitial

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;
}