如何在css中继承通用选择器（*）？

Question

我的css文件中有这个类

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

看起来这个类*将每个东西放在边距0和填充0处。这个类覆盖了引导程序OL和UL列表。

如何从Bootstrap继承我的OL和UL列表的*类？

这就是*对我的OL和UL列表所做的。取消缩进

Answer 1

您可以使用:not()伪选择器。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<p>paragraph</p>
<h1>heading</h1>
<ul>
  <li>ul</li>
</ul>
<ol>
  <li>ol</li>
</ol>

您还可以引入一个指定填充/边距的类，并在要应用它的元素上使用它。

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

.pad {
  padding-left: 25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<p>paragraph</p>
<h1>heading</h1>
<ul class="pad">
  <li>ul</li>
</ul>
<ol class="pad">
  <li>ol</li>
</ol>

Answer 2

低于* {}，只需重新添加您删除的样式

.my-list {padding：10px; }

开始使用*没有充分的理由。如果您想要全局重置，只需将要重置的元素链接在一起并应用于这些元素。

关于此的其他讨论： What does a star-preceded property mean in CSS?