Question

我知道如何为多个类赋予相同的样式，我们确实在类名之间使用逗号。但是我不明白下面的代码是什么。

.navbar-inverse .navbar-toggle { background-color: #333; }

Answer 1

它的层次结构将影响.navbar-toggle下的navbar-inverse类

Answer 2

这将为类名称为“ navbar-toggle”的元素提供背景颜色，该元素位于类名称为“ navbar-inverse”的元素内部

Answer 3

navbar-inverse是父级，.navbar-toggle是子级。

当您要建立父类和子类的层次结构时，请遵循此方法。在下面的代码中，查看第一个.navbar-toggle有背景而第二个没有背景。

.navbar-inverse {
  background-color: #ccc;
  padding: 1em;
}

.navbar-inverse .navbar-toggle {
  background-color: #333;
  color: white;
}

.navbar {
  background-color: #ccc;
  padding: 1em;
}

<div class="navbar-inverse">
  <div class="navbar-toggle">
    This is the child
  </div>
</div>

<hr>

<div class="navbar">
  <div class="navbar-toggle">
    This wont be affected!
  </div>
</div>

Answer 4

CSS选择器各部分之间的空间称为descendant combinator：

ancestorSelector descendantSelector { rules }

利用此选择器的CSS选择器称为descendant selector。请注意，任何数量的空格都像单个空格一样工作。

而>表示父子关系，被称为child combinator。

parentSelector > childSelector { rules }

利用此选择器的CSS选择器称为child selector。

看这个例子：

/* 
  this will affect any element whose classlist contains "b" 
  inside any element whose classlist contains "a",
  no matter how deeply nested it is 
*/
.a .b {
  color: blue;
}

/* 
  this will affect only elements whose classlist contains "b" 
  and which are direct children of any element whose classlist contains "a"
*/
.a > .b {
  color: red;
}

<div class="a">
  <div class="b">
    This is the direct child of <code>&ltdiv class="a"&gt</code>.
    <div class="b">
      This is <strong>not a direct child</strong> of <code>&ltdiv class="a"&gt</code>.
    </div>
  </div>
  <div class="c">
    <div class="b">
      <hr />
      Unaffected by <code>.a &gt .b</code>, but <code>.a .b</code> matches.
    </div>
  </div>
</div>

Answer 5

.navbar-inverse> .navbar-toggle {/ 此样式仅适用于一级孩子 /

}

.navbar-inverse .navbar-toggle {/ 此样式适用于所有子对象 /

}

Answer 6

它表明我们有两个类

.navbar-inverse和.navbar-toggle

.navbar-toggle是.navbar-inverse的子代

并且所应用的css仅在.navbar-toggle作为.navbar-inverse子代的情况下才可用html编写。

Answer 7

尝试此代码。

HTML

<div class="navbar-inverse">
  <div class="navbar-toggle"></div>
  <div class="navbar-toggle"></div>
</div>

CSS

.navbar-inverse > .navbar-toggle { /*This style applied only for first child*/

   }

   .navbar-inverse .navbar-toggle { /*This style applied for all the child*/

   }

如何为多个类赋予相同的样式

7 个答案: