时间戳

首页 > 解决方案 > 无法使用 CSS 设置链接样式

html - 无法使用 CSS 设置链接样式

问题描述

好的，对于这个愚蠢且非常具体的问题，我很抱歉，但我无法弄清楚这一点。

我只是想设置两个<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>
<!------------------------------------------------------------->

标签： htmlcssstyles

解决方案

您正在尝试访问作为页脚使用中的直接子代的 a 标签，footer a或者footer > span > a

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

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

推荐阅读