Question

这可能很容易，所以我提前道歉，但我正在第5小时试图弄清楚这个烂摊子。这是我试图呈现为横条的UL：

<div id="navbarwrapper">
  <ul id="navbar">
    <li><a href="works.html">Search</a></li>
    <li><a href="works.html">Tips</a></li>
    <li><a href="works.html">Neighborhoods</a></li>
    <li><a href="works.html">Relocation</a></li>
  </ul>
</div>

这是奇怪的CSS似乎出现故障：

#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}

我遇到的问题是，使用此标记时，HTML中的锚标记中包含的文本没有接收直通（我使用直通作为占位符，因为它在工作或不工作时很明显;我实际上并不想要一个直通线。）

这是奇怪的一点。如果我用以下代码替换“#navbar ul li a”嵌套，它可以工作：

#navbar li a {text-decoration:line-through;}

此外，如果我使用以下内容更改“#navbar li {display：inline;}”，则会丢失内联属性：

#navbar ul li{display:inline;}

是因为我与“#navbar”和“ul”重复了吗？这对我来说似乎太奇怪了，我觉得我过去能够毫无错误地使用这种语法。

感谢您的帮助。

Answer 1

您的ul已经拥有navbar的ID。这就是为什么#navbar ul与任何东西都不匹配的原因。

ul#navbar将匹配。

Answer 2

#navbar ul is wrong...#navbar is the ul itself.

Answer 3

您的选择器不正确。

#navbar是UL元素本身，因此选择器#navbar ul不会定位任何内容。

正确的选择器是

#navbar {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }

Answer 4

您的<ul>的ID为#navbar，因此#navbar ul您ul内的其他ul实际上正在ul#navbar li a {text-decoration:line-through;}。

尝试

{{1}}

Chrome嵌入式元素被Chrome / Firefox忽略？

4 个答案: