这个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 { ... }

我猜测空块{ }实际上有一些样式,你遗漏了,为了便于阅读？当然,如果它们完全是空的,就像在你的例子中那样,完全删除选择器是安全的.