我知道如何为多个类赋予相同的样式,我们确实在类名之间使用逗号。但是我不明白下面的代码是什么。
.navbar-inverse .navbar-toggle { background-color: #333; }
答案 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><div class="a"></code>.
<div class="b">
This is <strong>not a direct child</strong> of <code><div class="a"></code>.
</div>
</div>
<div class="c">
<div class="b">
<hr />
Unaffected by <code>.a > .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*/
}