了解CSS子选择器

Question

我是在了解一些知识(我已经查阅了文档,仍然无法绕过它).我已经把一些简单的CSS放在一起,以了解它应该做什么或表现什么？

<div class="navbar">
    <div class="container">
        <div class="logo">
            Yes
        </div>        
    </div>
</div>

所以,我已经把一些非常简单的html与一些非常简单的CSS放在一起.

body{
    margin:0;
}

.container{
    margin: 0 auto;
    width: 960px;
    background-color: red;  
}

.navbar{
    background-color: #E3E3E3;
    border-bottom: 1px solid #A0A0A0;
    color: #000;
    padding: 10px 0 10px 0;
}

.navbar > logo{
    float: left;
    margin-left: 100px;
}

所以我想要理解或实现的是什么(如果有的话).navbar> logo做什么？我想要它做的是改变某种风格.因为我想提高我的CSS知识,所以我只是想绕过这个.

这是一个小提琴:JSFIDDLE

请注意这不是针对任何具体或项目明智的,所以我不是要求有人帮助我,我只是想要一些简单的解释如何正确使用这些.

Answer 1

.navbar > logo 

没有做任何事情,因为你没有<logo>元素.

因为logo是一个类,它应该是.logo:

.navbar > .logo

和...之间的不同:

.navbar .logo
.navbar > .logo

上面的第一个选择器是一个后代选择器.它将选择标记结构中无序列表下任何位置的任何列表项.列表项可以深埋在其他嵌套列表中的三个级别,并且此选择器仍将匹配它.上面的第二个选择器是子组合选择器.这意味着它只会选择作为无序列表的直接子项的列表项.换句话说,它只看到标记结构的一个级别,而不是更深.因此,如果存在更深层次嵌套的另一个无序列表,则此选择器将不会定位其子列表项.

参考

拿走你现在所知道的,.navbar > .logo是行不通的.它必须是.navbar > .container > .logo或只是.navbar .logo.