Question

问题：现有资源依赖项（我不允许更改或从构建中删除），其中包含一个规定不需要的按钮样式的样式表。我想以某种方式克服这个样式表对我页面中按钮样式的影响。

问题：使用我自己的本地样式表，如何恢复默认的Windows css按钮样式（背景，形状，文字）？ - 我不知道css属性应该是什么等等（我假设我必须使用“！important”短语等。）

Answer 1

每个浏览器都有自己的一组默认CSS规则。没有“Windows”CSS，除非你明确指的是IE尽力匹配所述风格。您需要找到首选浏览器的默认值并在新CSS之后附加它们以将它们推翻回默认主题。

一些常见的浏览器默认样式：

Answer 2

请勿使用!important

而是以更高的特异性定义您的按钮样式，并为您的按钮提供所需的外观。因此，如果在原始样式表中，您有

button { ... }

然后在样式表中执行

#parent button { ...  }

Answer 3

你不会，也不应该使用！重要。您只需要按照CSS特性和继承的原则正确覆盖。

Explanation of CSS Inheritance

例如 - 假设您的“不需要的”按钮样式是这样的：

<input type="button" class="unwanted" />

你的（不可编辑的）样式表中有CSS：

.unwanted {
fooRule: whatever;
barRule: whatever;
}

使用继承，您只需编写自己的外部样式表。要记住的事情：

（1）您应该将其放在包含“不需要的”样式表引用的现有内容之下。继承按顺序处理外部样式表。这遵循“最接近规则获胜”的原则。（2）编写CSS规则的方式必须比当前应用不需要的样式的规则更具体。同样，上面的链接确实有助于解释这一点。

回到我们之前的例子，不需要的风格只是被一类“不需要的”所应用。您的规则可以覆盖而无需编辑HTML。或者你可以编辑HTML - 这取决于你。它还取决于您想要影响按钮样式的全局性。

如果您希望全局影响所有具有“不需要”类的按钮，您可以执行以下操作：

input[type='button'] .unwanted {
fooRule:override;
}

如果您只想更改某些具有不需要风格的按钮，您可以改为：

.unwanted.newRule {
fooRule:override;
}

然后你会修改你的HTML：

<input type="button" class="unwanted newRule">

请注意.unwanted.newRule意味着它只会影响带有者和newRule类的“元素”。如果不需要的样式设置如下，它不会改变任何东西：

<form class="unwanted">
    <input type="button" class="newRule" />
</form>

原因是.unwanted.newRule的意思是“两个类都在同一个元素上”。您可以将其更改为：

.unwanted .newRule {foo}

所以 - 我的观点是，有很多语义上正确的方法来正确地利用CSS特异性和继承，并做你想做的事情，而不必使用！important。

另一方面，你必须使用的唯一原因！重要的是，如果使用将'style'属性写入HTML元素的javascript实际应用了按钮的css样式。如果是这种情况，（1）不要使用那个JS，因为这是使用JS进行样式化的一种可怕的方法，（2）你将不得不使用！important来覆盖JS应用的内联样式。同样，这是因为级联的工作方式 - 在这种情况下，CSS由（1）浏览器（用户代理），（2）外部css，（3）内部'head'css，（4）内部内联css应用，（5）作者！重要声明，（6）用户！重要声明。

如何克服现有的CSS并将按钮样式更改为默认的Windows样式按钮？

3 个答案: