无法使用 CSS 设置链接样式 [重复]答案

【问题标题】：Unable to style links with CSS [duplicate]无法使用 CSS 设置链接样式 [重复]
【发布时间】：2021-12-08 08:16:29
【问题描述】：

好的，对于这个愚蠢且非常具体的问题，我很抱歉，但我就是想不通。

我只是想设置两个<li> 元素的样式，它们的位置如下：<nav><ul><li><a href="">text</a></li></ul></nav>。另外，我想将页脚设置为白色。

我不知道我的代码出了什么问题，是什么阻止了它的发生。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  background-color: #0e2a47;
}

.Titlebanner {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-color: #48ffd5;
  border-radius: 1em;
}

.Titlebanner h1>a {
  color: #ffffff;
  font-weight: 700;
  font-size: 2em;
  text-decoration: none;
  border-bottom: 2px solid #48ffd5;
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style: none;
  padding: 0;
}

nav li {
  list-style: none;
  display: flex;
  margin: 2em;
  padding: 1em;
  border-radius: 1em;
  border: 2px solid #48ffd5;
}


/* --------------Here is what I’ve tried to modify but doesn’t work-------*/

a:hover,
a:visited,
a:link,
a:active {
  color: white;
  text-decoration: none;
}


/*---------------------------------------*/

.body {
  display: flex;
  flex-direction: row;
}

.ranking {
  width: 8%;
  height: 4em;
  background-color: grey;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0.5em;
}

.ranking>ul {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ranking>ul>li {
  margin: auto
}

.Analysis {
  display: flex;
  flex-direction: row;
  margin: auto;
  width: 80%;
  justify-content: center;
  text-align: justify;
}


/*---------------------- and here for the footer -------*/

footer>a {
  display: block;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: white;
}


/*-----------------------------------------------*/

<body>
  <header>
    <div class="Titlebanner">
      <h1><a href="index.html">Impact of Privacy Policies on Users’ Lives</a></h1>
    </div>
    <!------------- here is the part I’m trying to style----->
    <nav>
      <ul>
        <li><a href="result.html">Results</a></li>
        <li><a href="analysis.html">Analysis</a></li>
      </ul>
    </nav>
    <!----------------------------------------------------->
  </header>

  <div class="body">
    <div class="ranking" id="ranking">
      <ul>
        <li>First Place</li>
        <li>Second Place</li>
      </ul>
    </div>

    <div class="Analysis">
      text
    </div>
  </div>
</body>
<!----------------- and the footer I’m trying to style as well------->

<footer>
  <span class="">
      <a href="">About us</a>
    </span>
</footer>
<!------------------------------------------------------------->

【问题讨论】：

您在正文元素之外有内容。那是无效的 HTML。
您的选择器.Titlebanner h1>a 比您的裸锚选择器具有更高的特异性。它优先。您的浏览器的文档检查器会非常清楚地说明这一点。

标签： html css styles

【解决方案1】：

您正在尝试访问页脚中的直接子标签，请改用 footer a 或 footer > span > a

我不确定为什么您的标题样式不起作用，我想这与特异性有关尝试将您的选择器 header > h1 > a 简化为 header a 并将 a:hover 更改为 header a:hover

在命名类时也尽量不要使用大写符号

【讨论】：