Question

我正在尝试将下拉列表添加到已具有全局“选择”样式的页面。有没有办法告诉新的选择列表忽略全局风格？使用全局样式的现有大约有1到2亿个下拉，所以我不想重构现有的html。

Answer 1

假设您可以在该元素上设置唯一的类或ID，您可以使用（ limited browser support ）属性all并将其设置为unset或{ {1}}

像

这样的东西

initial

和

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

Answer 2

没有简单的方法来做你要求的事情，一种方法是创建一个CSS类，重置特定元素及其子元素的所有适当属性，使其更完整，这是一个很好的起点{{3 }}

Answer 3

您可以使用“！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

参见特异性文档here。

<强>更新

例如：

您有一个全球规则：

a {color: blue}

但是你希望你的链接变红。因此，您必须在下面创建规则：

a {color: red !important}

如果全局规则也有“！important”，则必须使用更具体的选择器：所以，你可以使用：

body a {color: red !important}

Answer 4

你可以添加级联样式，如：

#id1 .class1 select

或

.class:width:200px !important

！important将使它使用你想要的样式而不是全局样式，但如果你必须覆盖它，它会变得有点棘手。你必须使用两者的组合。

Answer 5

我最倾向于缩小选择范围。我的意思是......

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

CSS：

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

Answer 6

或者你可以......

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

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个新的声明块。这是example。

此外，wide swath of browsers支持:not()，甚至IE9 +和Safari 3.2 +。

有没有办法告诉html元素忽略任何样式表？

7 个答案: