Question

我似乎无法弄清楚为什么我的链接仍然有下划线，即使我已尝试为body和#nav li a指定text-decoration none。

如果我在css中的text-decoration: none下指定* {}，我可以删除下划线。

顺便说一句，链接在页面的其余部分保持下划线，除非我这样做 {c}中的* {}。关于我做错了什么的建议？

谢谢！

/*html, body formatting */

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', Times, serif;
  font-size: 100%;
  color: bisque;
  overflow: hidden;
  text-decoration: none;
}

/* background image */

html {
  background-image: url(../images/portfolio-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}


/* navigation */

#nav {
  max-width: 960px;
  /*border: dotted 1px red;*/
}

#nav ul {
  list-style-type: none;
  text-align: center;
}

#nav li {
  display: inline;
  margin-right: 10px;
}

#nav li a {
  color: #D0D0D0;
  text-decoration: none;
}

#nav a:hover {
  color: white;
}

<head>
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <div id="nav">
      <u>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
      </u>
    </div>
    <div id="header">Leo K</div>
    <div id="main">Main container <a href="#">Test Link</a></div>
    <div id="footer">Footer</div>
  </div>
</body>

Answer 1

很简单，你错过了一个更简单的问题！

<u>
    <li>...
    <li>...
<u>

＆＃34;＆lt; u＆gt;＆＃34; s添加下划线，直到＆＃34;＆lt; / u＆gt;＆＃34;。我认为你的意思是＆＃34;＆lt; ul＆gt;＆＃34; for＆＃34; unordered list＆＃34;，然后＆＃34;＆lt; / ul＆gt;＆＃34;。然后，你的CSS不会涵盖锚点：

#nav li a

但顺序应该是：

#nav ul li a {text-decoration:none}

那么，这就是为什么只有＃＆＃34;删除所有地方的所有下划线＆＃34;的工作原理。

我想你要修复＆lt; u＆gt;进入＆＃34;＆lt; ul＆gt;＆＃34;，并修复CSS。

链接下划线不会在导航栏上删除

1 个答案: