Question

我遇到了这段代码，并没有得到它。

1＆GT;

#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 { ... }

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

Answer 2

<ul>是id="nav"的后代。

或

<ul>是[{1}}的后代，是<ul>的后代，鼠标悬停在<li>上，是id="nav"的后代。< / p>

等

正如所指出的，第一行已匹配其余部分匹配的所有内容。也许儿童关系（>）意味着而不仅仅是后代。

第二个同样是多余的。

Answer 3

firat和秒也像查询他们选择项目中的项目

逗号分隔符允许您为分隔的组添加相同的样式唯一的空间允许您在节点中的shildrens和为父

中的节点指定的样式之后进行搜索

ul

这说你选择每个UL标签

ul li

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

ul li a

这表示你只选择包含在ul标签中的指定li tgas中的a标签，这不会选择任何叶子中没有li parent的标签。例如，这不会选择<body><a></a></body>

但是这会选择<ul><li><div><a></a></div></li></ul>

：hover是一个安全事件触发器，当你将鼠标悬停在该项目上时会调用该事件。

＃运算符表示您搜索ID属性标记点.运算符，您搜索的是一个属于类stag

的项目

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

添加ID：

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

这意味着div使用important-div标识符进行标识，您可以使用此名称对此节点进行伪造。就像你的信用卡号码一样，没有人和你一样。

添加calssnames

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

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

这个css代码是什么意思？

3 个答案: