Question

我最近开始学习CSS和HTML，并且正在做头版练习。但是，浏览器正在覆盖并将其他元素（位于不同的div中）变成链接。我尝试使用CSS来解决它，但没有任何效果。我删除了所有CSS，但仍然相同。容器div和其中的所有元素现在都是链接，当我单击时，它将尝试重定向到hrf.html页面。

您能告诉我我在哪里做错吗？
开发工具中的容器div中的元素具有以下代码：

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Conquer</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
  <div class="nav">
    <div class="nav2">
      <ul class="navlist">
        <li><a href="hrf.html">Homepage</li>
        <li><a href="hrf.html">About Us</li>
        <li><a href="hrf.html">Services</li>
        <li><a href="hrf.html">Contact</li>
        <li><a href="hrf.html">External</li>
      </ul>
    </div>
  </div>

  <div class="container">
    <div class="first-sec">
      <div class="first-img">
        <img src="image1.jpg" alt="image">
      </div>
      <div class="heading">
        <h1>CONQUER</h1>
        <h2>Simple Website Design</h2>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

必须正确关闭标签，否则范围也会干扰其他标签的效果。在您的代码中，您忘记关闭<a> anchor tags，这就是为什么它使您担心。试试这个

 <div class="nav">
    <div class="nav2">
    <ul class="navlist">
    <li><a href="hrf.html">Homepage</a></li>
    <li><a href="hrf.html">About Us</a></li>
    <li><a href="hrf.html">Services</a></li>
    <li><a href="hrf.html">Contact</a></li>
    <li><a href="hrf.html">External</a></li>
    </ul>
    </div>
    </div>

最好的运气

Answer 2

这是因为您尚未关闭任何<a>标签。您必须关闭它，否则您将面临同样的问题。

<li><a href="hrf.html">Homepage</a></li>

在所有<li>元素中遵循此做法。

那应该修复您的代码。让我知道。

Answer 3

您尚未关闭“ navlist”类中的锚标签。

<li><a href="hrf.html">Homepage</a></li>
<li><a href="hrf.html">About Us</a></li>
<li><a href="hrf.html">Services</a></li>
<li><a href="hrf.html">Contact</a></li>
<li><a href="hrf.html">External</a></li>

尝试一下。

浏览器覆盖了我代码中的所有元素，并将它们转换为链接

3 个答案: