Question

我在使用CSS代码时遇到问题。我需要在div类.user_avatar和.user_name中设置背景色，它们是 .user .user_header 的子级。

我以css样式声明： .user .user_header .user_avatar，.user_name {.. 正确吗？或以下形式： .user .user_header .user_avatar，.user .user_header .user_name {..

.user .user_header .user_avatar, .user_name {
  background: white;
  }

<div class="user">

  <div class="user_header">
  
    <div class="user_avatar">
      <img src="https://via.placeholder.com/50">
    </div>
    
    <div class="user_name">
      <h3>User</h3>
    </div>
 
  </div>
 
</div>

Answer 1

使用这种方法，您将面临特异性问题。您可以阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

理想情况下，您希望通过保持10点的特异性来保持样式的控制（定位类，而不使用级联选择器）。

在您遇到的问题中，正确的方法应该是

.user_avatar, .user_name {
    background-color: white;
}

但是如您所见，这是多余的。在这里，您的类描述了div的角色，而您可以对其进行不同的定义，并在UI中具有更广泛的作用。

<div class="user">

  <div class="user_header">

    <div class="user__info">
      <img src="https://via.placeholder.com/50">
    </div>

    <div class="user__info">
      <h3>User</h3>
    </div>

  </div>

</div>

在上面的代码中，我按照BEM约定（http://getbem.com/naming/）将子类随意更改为user__info。

这样，现在您只能使用一个类来处理背景色（或子类的任何其他适用样式）。

.user__info {
    background-color: white;
}

要进一步阅读该主题，建议您阅读以下文章：https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ 以及上一篇文章的发展：https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

这也是可扩展CSS上更普遍的有趣观点：http://mrmrs.io/writing/2016/03/24/scalable-css/

Answer 2

以下内容不正确：

Update

您必须像这样重复祖先：

.user .user_header .user_avatar,
.user_name {

但是，您可能会跳过顶部的.user .user_header .user_avatar, .user .user_header .user_name {而仅定位标头，或者直接使用元素的类名：

.user

.user {
  background: green;
  border: 1px solid green;
  width: 200px;
}
.user_avatar, .user_name {
  background: white;
}

Answer 3

div的背景默认是透明的，因此您可以像这样简单地完成它：

.user_header {background: white;}

如果您希望user_header的所有div子对象都相同，则可以：

.user_header > div {background: white;}

由于您已经为孩子开设了课程，因此可以这样：

.user_avatar, .user_name {background: white;}

希望有帮助

Answer 4

您可以通过不同的方式做到这一点：

使用后代组合器：

.user .user_header .user_avatar, .user .user_header .user_name {
   background: white;
}

或使用子组合器

.user > .user_header > .user_avatar, .user > .user_header > .user_name {
   background: white;
}

但是，我建议您遵循http://getbem.com/惯例以获取更清洁的CSS文件。

Answer 5

两个都是正确的，但第二个更具体。

如何在CSS中为所有子类正确设置样式？

5 个答案: