时间戳

首页 > 解决方案 > CSS类不起作用

html - CSS类不起作用

问题描述

我对 html 和 css 有点陌生，想创建自己的投资组合。不过，我的课程有一些问题。每当我尝试在 css 中调用它们时，它似乎并没有做它应该做的事情。

当我在不使用类的情况下调用它时，它工作得很好。

希望有人可以帮助并找到我的错误，在此先感谢。

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

CSS

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

更新

更改了css，但仍然无法正常工作。

在此处输入图像描述

标签： htmlcsscss-selectors

解决方案

这门课不行。您指出了与 class 的链接header_nav。但你没有。

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

它应该是（类内的链接.header_nav）

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

更新：

我已经包含了片段。是你想要的吗？

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

更新 2 CSS 中的顺序非常重要。如果您想强制执行您的样式，您可以!important在样式之后使用。（尽管我看到了被认为是不好的做法的文章。）

.header_nav a {
  font-family: arial;
  display: block;
  color:white!important;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none!important;
 }

推荐阅读