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

Question

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

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

这导致我的h1在此页面上表现不同.有没有办法从中排除某些选择器？否则我想我必须找出它应用的内容并列出所有内容而不是*？

Answer 1

好了,快回答是更换*了*:not(h1).

这看起来像是规范化的简单尝试.您可以删除它并修复插件元素上的任何错误,或者只是修复您h1的应有的边距/填充.

@RaphaelDDL是的,但众所周知,修改第三方代码是不好的做法,因为它使升级成为a $$的痛苦.我认为这至少要求你在答案中承认这个问题:"如果你能够而且愿意忍受修改第三方CSS的痛苦" (2认同)

Answer 2

我只是建议你使用选择器h1,它将覆盖所有选择器(*):

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

* selector用于例如,总是更好.因为你可能想要改变#somecontent h1而不是h1那么只是使用#somecontent h1{...}会覆盖规则,* selector甚至只会h1 tag受益* selector.

* selector如果你对插件css不感兴趣,那么一个非常好的想法就是覆盖它自己:

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