Question

我的问题：

在没有类和ID的情况下怎么办？我不明白为什么一个有效，而另一个无效。我认为在CSS中，您只能使用类和ID。是否可以在没有id或class的CSS中描述其他对象？

第一个：

这在测试中起作用。

<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

第二个：

这个人创建了一个错误的网站。

<!DOCTYPE html>
<html>
<head>
<style>
#ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}


#li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}

#li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul id="ul">
  <li><a id="li a" href="#home">Home</a></li>
  <li><a id="li a" href="#news">News</a></li>
  <li><a id="li a" href="#contact">Contact</a></li>
  <li><a id="li a" href="#about">About</a></li>
</ul>

</body>
</html>

Answer 1

第一个不带类的例子

<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

在第二个示例中，您在a标记中添加了ID，而不是li，只需对其进行了更改

<!DOCTYPE html>
<html>
<head>
<style>
#ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}


#li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}

#li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul id="ul">
  <li id="li"><a href="#home">Home</a></li>
  <li id="li"><a href="#news">News</a></li>
  <li id="li"><a href="#contact">Contact</a></li>
  <li id="li"><a href="#about">About</a></li>
</ul>

</body>
</html>

Answer 2

如果您在id="li"元素上设置<li>并从id="li a"元素中删除<a>，则第二个版本将起作用。

Answer 3

您不能使用相同的id，因为不同的标记必须使用class或更改id的名称。这可能是问题所在。

Answer 4

display: inline-block占据文本的宽度，而display: block占据父文本的整个宽度。试试这个。

<!DOCTYPE html>
<html>
<head>
<style>
#ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#ul li {
  display: inline-block;
}


#ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}

#li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul id="ul">
  <li><a id="li a" href="#home">Home</a></li>
  <li><a id="li a" href="#news">News</a></li>
  <li><a id="li a" href="#contact">Contact</a></li>
  <li><a id="li a" href="#about">About</a></li>
</ul>

</body>
</html>

Vertical Navbar-有人可以解释为什么第一个正常工作而第二个却没有工作吗？

4 个答案: