Question

我是css的新手，希望对css样式继承有一个简单明了的理解。感谢帮助。以下是我尝试创建的水平导航栏。首先，我这样做是为了重置全局填充和边距（我阅读了一些教程并相信这是一个很好的做法。

*{
    padding: 0px;
    margin: 0px;
}

然后我在我的li中添加了一些填充，以在菜单项之间添加一些空隙。

.navi ul li {
    float: left;
    padding: 0px 10px;
    border-right: 1px dashed #770;
    position: relative;
}

以下是子菜单项。我注意到自动添加了10px的左侧填充，我认为我需要手动添加。

.navi ul li ul li {
    border-right: none;
    border-top: 1px dashed #789;
    width: 200px;
}

html：

<!DOCTYPE html>
<html>
    <head>
        <title><?php echo $app_name ?></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div class="page_title">
                    <?php
                        echo "<h1>$app_name</h1>";
                    ?>
                </div>
                <div class="navi">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="signup.php">Sign up</a></li>
                        <li>
                            <a href="#">Menu1</a>
                            <ul>
                                <li><a href="#">Sub-menu1</a></li>
                                <li><a href="#">Sub-menu2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Log in</a></li>
                    </ul>
                </div>
            </div>
        <div class="contents">
</div></div></body></html>

Answer 1

这是一个解释。也建立一个 DEMO 。

 /*Will remove margin and padding from all the HTML element used in page As you are using `*` Universal Selector*/
*{
    padding: 0px;
    margin: 0px;
}

/*only affect the first level  li*/
.navi ul li {
    float: left;
    padding: 0px 10px; /*As the padding given to parent `li` so the padding applied to second level `li` as well */
    border-right: 1px dashed #770;
    position: relative;
  color:green;
}

/*only affect the Second Level  li*/
.navi ul li ul li {
    border-right: none;
    border-top: 1px dashed #789;
    width: 200px;
  color:red;
}

Answer 2

写作

*{
    padding: 0px;
    margin: 0px;
}

您要删除所有元素的边距和填充。

以下代码

.navi ul li {
    float: left;
    padding: 0px 10px;
    border-right: 1px dashed #770;
    position: relative;
}

为拥有父li父ul的所有.navi添加样式。

请注意，这包括所有li，无论级别如何，都可以是.navi ul li，.navi ul li ul li或.navi ul li ul li ul li等等。< / p>

以下代码

.navi ul li ul li {
    border-right: none;
    border-top: 1px dashed #789;
    width: 200px;
}

将样式添加到.navi ul li ul li或.navi ul li ul li ul li等等。

可能解决您所问的问题：

更改

.navi ul li

到

.navi > ul > li

这样只能为ul .navi的直接子项设置样式。即第一级li s。

和

更改

.navi ul li ul li

到

.navi li > ul > li

此代码仅影响li中ul个li的{{1}}个.navi。即第二级li s。

DEMO此处。

Answer 3

.navi ul li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}

上述课程将应用li类div下的所有navi标记。当您在选择器之间使用space时，它将以所有子选择器为目标。假设如果您只想定位一级孩子，那么您需要在下面的选择器之间使用>。

.navi > ul > li {
float: left;
padding: 0px 10px;
border-right: 1px dashed #770;
position: relative;
}

因此，上述代码会从UL中找到.navi的第一级孩子，因为它会检查LI的第一级孩子。如果你在CSS中声明如上所述，那么你需要明确地提到你想要的第二级孩子的填充。

Read for Better Understanding of Child Selector

css样式继承如何工作

3 个答案: