这段CSS代码是什么意思？

Question

我遇到了这段代码，但没有明白。

1>

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{}

2>

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly{}

这是 html 代码：

<ul id="nav">
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#" id="products" class="top_link"><span class="down">Products</span></a>
        <ul class="sub">                
            <li><a href="#" class="fly">Cameras</a>
                <ul>
                    <li><a href="#">Nikon</a></li>
                    <li><a href="#">Minolta</a></li>
                    <li><a href="#">Pentax</a></li>
                </ul>
            </li>

            <li class="mid"><a href="#" class="fly">Lenses</a>
                <ul>
                    <li><a href="#">Wide Angle</a></li>
                    <li><a href="#">Standard</a></li>
                    <li><a href="#">Telephoto</a></li>
                    <li><a href="#" class="fly">Zoom</a>
                        <ul>
                            <li><a href="#">35mm to 125mm</a></li>
                            <li><a href="#">50mm to 250mm</a></li>
                            <li><a href="#">125mm to 500mm</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Mirror</a></li>
                </ul>
            </li>

            <li><a href="#">Flash Guns</a></li>
            <li><a href="#">Tripods</a></li>
            <li><a href="#">Filters</a></li>
        </ul>
</li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">Services</span></a>
        <ul class="sub">
            <li><a href="#">Printing</a></li>
            <li><a href="#">Photo Framing</a></li>
            <li><a href="#">Retouching</a></li>
            <li><a href="#">Archiving</a></li>
        </ul>
  </li>

</ul>

---

有人能告诉我上面 2 个 css 代码块解决了哪些区域吗？

谢谢

Answer 1

我想说的是原始开发者，而不是你，没有得到它。

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul {

}

没有与 #nav li:hover li:hover li:hover li:hover ul ul 匹配的元素尚未与 #nav ul 匹配。对于另一组选择器也可以这样说。

在 CSS 中，逗号分隔的选择器列表意味着“将其应用于与这些条件中的任何匹配的所有元素”。

现在，对于这两个示例，顶部选择器还将匹配任何后续选择器匹配的任何元素，从而使它们全部冗余。以下选择器专门用于增加特异性。

如果每个选择器后面有不同的 CSS 块，那么代码就会有意义，尽管它会相当难看。我猜测这是基于在不同级别的树中使用不同样式的代码（例如控制文本缩进），然后将其重构为对所有选择器都相同的代码。

然后有人意识到，由于每个块中的样式相同，因此可以组合所有选择器，但没有意识到代码可以进一步重构，以简单地 #nav ul { ... }< /code>

我猜测空块 { } 实际上有一些样式，您为了可读性而忽略了这些样式？当然，如果它们完全是空的（如您的示例所示），则完全删除选择器是安全的。

Answer 2

一个

，它是 id="nav" 的后代。

或

，它是
的后代，它是具有鼠标的
• 的后代在它上面，它是 id="nav" 的后代。

等等。

正如所指出的，第一行已经匹配其余部分匹配的所有内容。也许子关系 (>) 是指后代关系，而不仅仅是后代关系。

第二个同样是多余的。

Answer 3

firat 和秒也像查询一样，它们选择项目内的项目，

逗号分隔符允许您为分隔的组添加相同的样式
唯一的空间允许您查找节点中的 shildren 以及为父级中的节点指定的样式

ul

这表示您选择每个 UL 标签

ul li

这表示您仅选择 UL 标签中包含的 li 标签

ul li a

这表示您仅选择a 标签包含在指定的 li tgas 中，该标签包含在 ul 标签中，这不会选择任何叶子中没有 li 父代的 a 标签。例如，这不会选择

但会选择

:hover 是一个指定的事件触发器，当您将鼠标悬停在项目上时会调用该事件。

# 运算符表示您搜索 ID 属性标签
您搜索带有类 stag 的项目的点 . 运算符

不要忘记只有一个项目具有相同的 id ，剪切几个项目可以具有相同的类，并且一个项目可以有 2 个或更多 不同类

添加 id 的

<div id="important-div"></div>

：这意味着该 div 使用 important-div 标识符进行标识，您可以使用该名称查找该节点。就像您的信用卡号码一样，没有人拥有与您相同的号码。

添加 calssnames

<a class="clickable redborder nomargin"></a> 

这意味着你的标签有 3 个类名，你可以使用可点击的类选择器添加样式，也可以使用其他类选择器添加样式