Question

所以，我在尝试将代码应用于子列表中的项目时遇到了这个问题，我将其命名为＆＃34; Horizontal＆＃34;

<nav class="horizontal" id="horizontal">
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Menu</a></li>
               <li><a href="#">Locations</a></li>
               <li><a href="#">Catering</a></li>
               <li><a href="#">About Us</a></li>
            </ul>

这应该转换为我的CSS文件

#horizontal > li {
    background-color: white;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    width: 180px;
    display: inline-block;
    horizontal-align: left;

我知道该文件已链接到我的HTML文档，因为它与其他样式规则一起使用..我想知道原因。任何帮助将不胜感激。

另外，请注意：对于此代码段

display: inline-block;
horizontal-align: left;
}

我试图去的效果是将项目显示为一个块并将其浮动到左侧，我想知道我是否在正确的轨道上代码。

最后，我似乎遇到了字体颜色和/或文本颜色属性的问题，因为它们似乎都不适用于我的列表：

#horizontal > ul > li > a:hover {
    background-color: rgb(255,101,101);
    text-color: black;

背景颜色发生变化，但文字保持不变。

Answer 1

<强> #horizontal > li

> li 在哪里找到具有ID为horizontal的父元素的LI元素

＆gt; （大于）运算符会查找父元素的直接后代。在您的示例中，#horizontal是父元素，直接后代是UL。

因此，您对LI的期望效果将不会被应用。

您可以使用

具有较高特异性权重的

#horizontal li，或#horizontal ul li或#horizontal > ul > li。

我在CSS中正确分配ID时遇到问题

1 个答案: