* 与类一起使用时，css 中的选择器不起作用答案

【问题标题】：* selector in css not working when used with class* 与类一起使用时，css 中的选择器不起作用
【发布时间】：2020-04-21 18:25:16
【问题描述】：

我正在用 html 创建一个网站。我在其中使用了现成的 html 联系表格。其中的 css 如下所示

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

body,
html {
  height: 100%;
  font-family: Poppins-Regular, sans-serif;
}

当我将它惰性化到我的网站时，它使我的整个页面错位，所以我决定只将属性赋予表单，所以我将整个表单放在一个 div 中并给它一个名为 starc 的类。现在我对 css 进行了以下更改以选择该类中的整个元素：

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

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

但这不适用于我的表单。谁能告诉我我的代码有什么问题。提前致谢

【问题讨论】：

兄弟，如果你想将css添加到特定的cals.starc，那么不需要在它之前添加*。
我也用过，没有 * 还是不行
检查控制台，css可能被其他css覆盖，请注意嵌套。

标签： html css class css-selectors

【解决方案1】：

Asterisk(*) 选择页面上的所有元素。如果您想将它用于类 starc，请删除星号 (*)。

【讨论】：

【解决方案2】：

使用像流行的normalize 这样的css 重置是很常见的事情。我强烈建议你这样做。然后我会删除你得到的这条规则

* { ... }

因为这会重置页面上所有元素的边距和填充。盒子尺寸很好，但规范化库中涵盖了这一点。

回答您的问题。如果您想重置表单内所有元素的边距，只需使用类反转星号

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

例如，如果您只想要表单中的直接子级，则执行此操作

.starc > * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

【讨论】：

【解决方案3】：

如果您只想选择一个具有“starc”类的元素，那么选择器将是：

.starc {

}

如果您使用* .starc，那么它与上面的相同，因为组合器选择嵌套在每个元素内的“starc”类元素。所以.starc 和* .starc 没有区别。

另一方面，如果您想选择“starc”类中的所有元素，那么组合器将类似于.starc *。

【讨论】：