html - CSS 在 CSS 和 HTML 中创建下拉列表时试图理解替代语法

Question

我看到两种引用无序列表 (<ul>)、列表项 (<li>) 和 anchor (<a>) 的不同方式。

我想在下拉列表中设置这些元素的属性，至少嵌套两层 <ul> .

我的问题具体是关于引用不同级别的方式 <ul> , <li>和 <a>里面有。

我把导航栏命名为id="navBar" .

我在 youtube 上看到:Building a drop down navigation bar

使用的语法是:

ul#navBar .sub1 li
ul#navBar .sub1 li a

定义类“.sub1”的位置，是嵌套的第一层<ul> , ".sub2"是嵌套的第二层 <ul> .

引用这些级别，使用的代码是。

ul#navBar .sub2 a {
                  background-color: blue;}

ul#navBar li:hover > a {
            background-color: #CFC;
            }

在我看来，定义 .sub1 和 .sub2 是多余的，我一直在使用以下格式:

#navBar ul li{ background-color: blue;}

#navBar ul li:hover ul{ background-color: red;}

真正的问题:

什么是正确的语法，使用我的(上面的代码)格式化风格。引用第二层嵌套 <ul>并影响 <li>或 <a>在那里？

我假设它是沿着这条线的:

 #navBar ul li ul li: hover ul{ background-color: red;}

但我错了:(

Answer 1

首先请注意，:hover 之前不应该有空格。

所以您概述的基本 HTML 结构是:

<ul id="navbar">
    <li>
        <ul class="sub1">
            <li>
                <ul class="sub2">
                    <li><a>Text</a><li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

要引用 .sub2 中的 li 和 a，您可以这样写:

#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }

教程分配类的原因是因为使用通用嵌套元素是使用 CSS 选择器的一种非常低效的方式；使用类更快。有关详细信息，请参阅 this article from CSS-Tricks .