Question

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

<!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>中时，它会发生变化。我预计子弹会从列表中消失。现在它看起来像那样。

主页
新闻
联系
关于

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

或

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

＆＃13;
＆＃13;
.background { background-color: #333333; } ul { list-style-type: none; color: white; }
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

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

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

2 个答案: