为什么 ul 选择器在链接的 CSS 文件中不起作用？答案

【问题标题】：Why the ul selector doesn't work in linked CSS file?为什么 ul 选择器在链接的 CSS 文件中不起作用？
【发布时间】：2018-06-06 02:34:11
【问题描述】：

我想用下面的代码做一个导航栏。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="background">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>

并在styles.css文档中使用了如下代码。

body.background {
  background-color: #333333;
}
ul {
  list-style-type: none;
}

虽然background 类工作得很好，但ul 选择器根本不起作用。当我将 CSS 代码放入 <style></style> 时，它会发生变化。我预计子弹会从列表中消失。现在看起来是这样的。

首页
新闻
联系方式
关于

【问题讨论】：

预期的行为是什么？
似乎工作：jsfiddle.net/vy6ptnmj/140 - 也许你只是不正确地链接到它？尝试在浏览器上按 CTRL+U 并单击链接的 CSS 文件以查看它是否正确链接。
您提供的代码中没有任何内容会导致项目符号在现代浏览器中显示。您可能希望将代码重新键入一个新的文本文件并保存在现有的文件上。可能有一些不可打印的字符干扰。您的控制台中是否有任何错误或警告？
您是否尝试清除浏览器缓存？还是在其他浏览器上运行？

标签： css html css-selectors

【解决方案1】：

试试这个：

.background {
  background-color: #eee;
}
ul {
  list-style-type: none;
}

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="background">
<ul>
  <li>Home</li>
  <li>News</li>
  <li>Contact</li>
  <li>About</li>
</ul>
</body>
</html>

我不确定你在期待什么.. 但我几乎看不到带有深色背景的列表项。似乎工作正常（没有子弹）。

或

您可以保持背景颜色不变，只需将您的 ul 颜色更改为白色，以便更容易看到。

.background {
  background-color: #333333;
}
ul {
  list-style-type: none;
  color: white;
}

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="background">
<ul>
  <li>Home</li>
  <li>News</li>
  <li>Contact</li>
  <li>About</li>
</ul>
</body>
</html>

【讨论】：

我不认为复制/粘贴代码可能是一个答案。甚至没有背景的变化......
我仍然看到子弹。它并没有改变任何东西。
@Baro 我们应该回答 cmets 中的问题吗？抱歉，不知道 - 我也不是在讽刺，我不太了解堆栈的元数据。
@noob 您使用什么浏览器来查看您的页面？您可能需要清除缓存。
好吧，sn-ps 也不会重现问题，因为 CSS 被插入到 <style> 标签中，而不是 <link>。

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .background{
            background:#333;
        }
        ul{
            list-style-type: none;
            color:white;
        }
    </style>
</head>
<body class="background">
    <ul>
        <li>Home</li>
        <li>News</li>
        <li>Contact</li>
        <li>About</li>
    </ul>
</body>
</html>

【讨论】：