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＆gt; logo做什么？我想要它做的是改变某种风格。我只是想绕过这个，因为我想提高我的CSS知识。

这是一个小提琴：JSFIDDLE

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

Answer 1

.navbar > logo

没有做任何事情，因为你没有<logo>元素。

因为logo是一个类，所以它应该是.logo：

.navbar > .logo

之间的区别：

.navbar .logo
.navbar > .logo

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

Reference

按照你现在所知，.navbar > .logo不起作用。它必须是.navbar > .container > .logo或.navbar .logo。

Answer 2

使用

.navbar > .container > .logo

或

.navbar .logo

你的错误：

在您的情况下，您应该使用类选择器.logo而不是元素logo

.logo不是.navbar的子项，它是后代，因此您应该使用上面的示例之一（使用后代括号或通过.container元素的子括号）

Example

了解CSS子选择器

2 个答案: