有没有一种方法可以让HTML元素忽略任何样式表？

Question

我正在尝试向一个已经具有全局“select”样式的页面添加一个下拉菜单。是否有办法告诉新的下拉列表忽略全局样式？现在已有大约1到2亿个下拉菜单使用了全局样式，因此我不想重构现有的HTML。

- Parris Varney

Answer 1

假设你可以在该元素上设置一个唯一的类或 ID，那么你可以使用（有限的浏览器支持）属性 all 并将其设置为 unset 或 initial。

比如说：

<div class="ignore-css"><div>

和

.ignore-css{all:unset;}

- Gabriele Petrioli

---

2021年，浏览器的支持情况已经好了很多。 - Rauni Lillemets

Answer 2

没有简单的方法来完成你所要求的操作，其中一种方法是创建一个CSS类，重置特定元素及其子元素的所有适当属性，以使其更加完整。以下链接是一个很好的起点：特定元素的CSS重置

- Kris Ivanov

---

这是最好的答案。它是唯一一个解决了实际问题的答案。 - Dave Hughes

Answer 3

您可以使用“!important”来覆盖另一个样式，例如：

您可以使用“!important”来覆盖另一个样式，例如：

a {color: red !important}

或者使用更具体的选择器：

*               // 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

请在此处查看有关特异性的文档。

---

更新：

例如：

您有一个全局规则：

a {color: blue}

但是你想让你的链接变成红色。 因此，您需要创建以下规则：

a {color: red !important}

如果全局规则也有"!important"，您必须使用更具体的选择器： 因此，您可以使用：

body a {color: red !important}

- Topera

---

我认为选择标签已经被一个 jQuery 插件（jqTransform）完全劫持了，否则这肯定会起作用的。 - Parris Varney

Answer 4

或者你可以只是...

<div class="global-css">
<div class="ignore-css">
<div class="important-css">
......
</div>
</div>
</div>

在哪里

.global-css{
    vertical-align: middle;
}
.ignore-css
{
    all:unset;
}
.important-css{
    vertical-align:left !important;
}

- Din Sahovic

---

再一次，有人将其标记为不好而没有添加解释性的评论。请不要这样做。 - www-0av-Com

Answer 5

我建议你缩小选择器的范围，也就是说...

<div class="newbox">
     <a href="#">I want this to be different.</a>
</div>

CSS：

div.newbox a
{
     color: #888;
     text-decoration: none;
}

- Marty

Answer 6

您可以添加类似以下的级联样式：

#id1 .class1 select

或者

.class:width:200px !important

使用 !important 将会使用您想要的样式而不是全局样式，但如果您必须覆盖它，这可能会有点棘手。您需要同时使用两种样式。

- locrizak

Answer 7

通常在这种情况下，我会给新元素添加一个唯一的类；在这种情况下，像这样做就可以了：

<select class=i-am-unique>
    <!-- <option> elements in here -->
</select>

然后在样式表中，找到全局规则并添加一个 :not() 伪类来区分：

select:not(.i-am-unique) {
    /* global rules */
}

select.i-am-unique {
    /* unique rules */
}

这只需要最少的代码更新，仅需在您的HTML标记中添加1个类，微调一个CSS选择器，并为唯一元素添加1个新的声明块。这里是一个示例。

此外，:not()被广泛支持各种浏览器，甚至包括IE9+和Safari 3.2+。

- CSSBurner