Html CSS类赢得'；行不通_Html_Css_Css Selectors

Html CSS类赢得'；行不通

html css

Html CSS类赢得'；行不通,html,css,css-selectors,Html,Css,Css Selectors,我对html和css略显陌生，希望创建自己的公文包。不过，我在课堂上有些问题。每当我尝试在css中调用它们时，它似乎并没有做它应该做的事情当我不使用类调用它时，它工作得非常好希望有人能帮我找到我的错误，提前谢谢 HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" cont

我对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，但仍然不起作用

我不确定您期望的是什么，但您的类声明似乎有点落后。它应该是类元素，所以

.header_nav li { your styles }
.header_nav a { your styles }

这门课不行。您指向了带有class

header\u nav

的链接。但你没有

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

它应该是（类中的链接

.header\u nav

）

更新：

我已经包括了这个片段。这是你想要的吗

正文{
背景色：#f1f6fe；
}
.头部导航{
列表样式类型：无；
保证金：0；
填充：25px；
溢出：隐藏；
背景色：#78aefa；
宽度：250像素；
}
li.header_导航{
浮动：对；
右边填充：20px；
}
.标题_导航a{
字体系列：arial；
显示：块；
颜色：白色；
文本对齐：居中；
填充：14像素16像素；
文字装饰：无；
}


Xander Feliers-投资组合

进行以下更改：

从

致：

而且，为了方便起见，您还可以对html进行更改

正文{
背景色：#f1f6fe；
}
ul.收割台和导航集装箱{
浮动：对；
填充：20px；
}
ul.header\U nav\U集装箱li.header\U nav{
列表样式类型：无；
浮动：左；
填充：0 20px
}


Xander Feliers-投资组合

如果类不起作用，您可以指定ID并以类似方式传递样式

哪种样式不被应用？没有

a.header\u nav

元素。您能否提供一个工作示例，说明您应该使用后代选择器。如果您正在尝试HTML，则不使用组合符。只应用了主体样式，我知道没有a.header\u nav元素就是这个例子。但是我也试过了，我只是按照你说的方式改变了。我以前试过这个，但效果不太好。这真的很奇怪，如果我在网站上运行你的代码，效果会很好。但是当我把它复制到我的项目中使用时，它根本不起作用……请检查是否有任何其他样式应用于

。header\u nav

或

顺序也适用于CSS。我发送的代码是我目前使用的唯一代码。因此，没有其他样式应用于.header_nav或aIf。如果顺序有问题，为什么它在代码段中工作？我真的不知道为什么它不起作用。是的，我第一次用ID做它，但认为它也不适合CSS，只是到处都用ID填充。不，他想把样式应用到多个元素上<代码>id必须是唯一的。

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

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

a.header_nav { 

}

.header_nav a {

}