在css中使用*选择器，但排除h1？

Question

我有一个jquery插件，令人恼火的是它在样式表的顶部。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

导致我的h1在此页面上的行为有所不同。有没有办法从中排除某些选择器？否则我想我必须弄清楚它应用的内容并列出所有内容而不是*？

Answer 1

嗯，快速回答是替换*的{​​{1}}。

这看起来像是规范化的简单尝试。您可以删除它并修复插件元素上的任何错误，或者只是修复您的*:not(h1)以获得它应该具有的边距/填充。

Answer 2

我建议你只使用选择器h1，它将覆盖所有选择器（*）：

h1{
  box-sizing:content-box;
  margin: 5px;
  padding: 5px;
}

---

最好使用* selector作为例如。由于您可能希望更改#somecontent h1而不是h1，因此仅使用#somecontent h1{...}会覆盖* selector的规则，即使只有h1 tag也会受益于* selector 1}}。

---

如果你对插件css不感兴趣，一个非常好的想法是覆盖* selector本身：

*{
  border-box: content-box;
  margin: 0; /*add your value as you wish*/
  padding: 0; /*add your value as you wish*/
}

您也可以更新h1：

h1{
  margin: 5px;
  padding: 5px;
}

但要考虑这一点，您必须确保您的css文件位于插件css文件的最后一行。

<link rel="stylesheet" type="text/css" href="plugin.css" />
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- last in order--->

Answer 3

*:not(h1)
{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

Answer 4

现代浏览器解决方案

*:not(h1)
{
/* css code */
}

跨浏览器兼容的解决方案

h1{
box-sizing:none;
margin:auto;
padding:auto;
}

编辑：删除多余的！重要标志。

Answer 5

这只是部分答案，但我建议改为使用继承来进行大小调整。如果需要，您可以轻松重置整个部分。使用box-sizing最终会得到更少的代码：border-box;通过这种方式。重置你的H1是显而易见的。只需明确引用它以绕过您的通用选择器。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

使用此HTML：

<div class="content">
<h1>Some Heading</h1>
</div>

使用此CSS重置：

.content { box-sizing: content-box; }