Question

我正在尝试为网站创建备用设计作为后备。我无法真正改变系统的架构方式。加载主样式表，然后加载第二个样式表。我控制了第二个样式表。我想重置很多CSS，特别是表单元素。

然而，我遇到了困难。例如，使用<button>：

background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;

虽然我可以设置background: none，border-radius：none`等等，但是按钮没有样式，而不是默认的浏览器样式。我必须将表单元素作为默认浏览器样式，以及页面上的许多其他元素。但我似乎无法让至少表格元素没有风格。

清晰度 简化问题：如何将<button>重新设置为默认值？

Answer 1

我建议使用CSS重置作为起点（Eric Meyers'可能是最着名的。）

我认为你在你不想设置自己的风格的事情上遇到了麻烦，但是把它恢复到浏览器的默认值（例如，你不希望margin:0;放在所有的东西上，你想要的H1上的默认大边距，p上的默认小边距等

您实际上可以获取用户代理样式表的副本，修改它们以使其更具体，并将它们包括在内以进行覆盖。 Here is a site that has copies of a lot of default UA stylesheets。这里的一个问题是每个浏览器都使用自己的浏览器，因此除非您浏览器检测并提供选择性样式表，否则它通常看起来不像通常用于该浏览器。但是，我认为没关系。我实际上建议您只选择您喜欢的浏览器默认设置并将所有浏览器设置为这样，或者您可以使用W3C's suggestion for default browser styles。

所有这些并不能解决你的问题，因为样式表单元素是地狱。一旦应用了样式，某些浏览器就会切换表单元素的呈现模式，这样您就永远无法将其恢复为原始样式。例如，IE7不支持圆角，但它们的默认按钮具有圆角，因为它以Windows操作系统样式呈现。但是只要你给按钮一个边框或其他一些样式，它就会失去那个漂亮的Windows阴影圆角默认外观，并且没有使用图像就无法恢复它！

所以真的，我不会试图让浏览器回到他们原来的默认风格。我使用UA默认样式表，然后修改它，以便制作一种通用的跨浏览器跨系统默认值。它看起来不像原生的无样式代码，但它看起来足够接近。

Answer 2

您需要了解CSS specificity的工作原理。您可以覆盖任何CSS规则，使其比其他规则更具体。

例如：

<div class="content">
    <div class="wrapper"><span>Hello World</span></div>
</div>

CSS：

.content .wrapper span { ... }
.wrapper span { ... }

在这种情况下，第一个声明将覆盖第二个声明，因为它“更具体”。您通常可以只在树上上一级并指定包装元素或包装类来覆盖内部元素的规则。这实际上是在处理许多CMS系统，例如WordPress，你无法访问主样式表，或者只是想让它独自存在，并重新设置你想要的部分。

阅读文章，这很重要。

CSS Specificity: Things You Should Know

重置继承的CSS

2 个答案: