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

时间:2019-07-23 04:41:27

标签: html css bootstrap-4

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

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

7 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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>

答案 3 :(得分:0)

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>

答案 4 :(得分:0)

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

}

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

}

答案 5 :(得分:-1)

它表明我们有两个类

.navbar-inverse.navbar-toggle

.navbar-toggle.navbar-inverse的子代

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

答案 6 :(得分:-1)

尝试此代码。

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

   }