时间戳

首页 > 解决方案 > 为什么 ul 选择器在链接的 CSS 文件中不起作用？

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

问题描述

我想使用以下代码制作导航栏。

<!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>. 我预计子弹会从列表中消失。现在看起来像这样。

标签： csshtmlcss-selectors

解决方案

尝试这个：

.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>

推荐阅读