CSS 选择器无法在任何特定情况下工作

问题描述 投票：0回答：1

我是一名初学者网络开发人员，正在尝试制作我的第一个虚拟网站。由于某种原因，当我在 Visual Studio 中使用类（或任何特殊性）时，它们不会注册。无论我使用什么特殊性，我的正义代码都不会注册它。我不明白问题到底是什么。不管是我的代码还是VS中的设置。有人可以帮我吗？

这是我的代码。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
    <link rel="stylesheet" href="StyleSheet.css" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/menu.html">Menu</a></li>
                <li class="logo"><a href="index.html">Dummy Website Logo</a></li>
                <li><a href="pages/locations.html">Locations</a></li>
                <li><a href="pages/contact.html">Contacts</a></li>

            </ul>
            <h1>Home</h1>
        </nav>
    </header>   
    <section id='three'>
        <div class="triple">a
        </div>
        <div class="triple">b</div>
        <div class="triple">c</div>
    </section>
    <section>lower-section</section>
    <footer>footer</footer>
</body>
</html>

CSS：

    body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: sans-serif;
}
header {
    background-color: black;
    padding: 20px;
}

header a {
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    margin-top: 30px;
}

header .logo a {
    background-image: url('images/TestSiteLogo.png');
    background: red;
    display: inline-block;
    text-indent: -9999px;
    width: 300px;
    height: 100px;
}

section {
    background-color: white;
    color: gray;
    padding: 20px;
    display: flex;
    flex-direction: row;
}         

div { 
    background-color: hsl(0 100% 50%);
    width: 100px;
    margin: auto;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    margin-right: 10px;
    display: inline-block;
}

footer {  
    background-color: black;
    padding: 20px;
    color: white;
}

代码结果 我希望导航选项卡中有背景图像，指定元素的背景颜色发生变化，指定元素中的文本无法看到，导航栏中的所有内容都是大写的，并且在那里页面顶部到导航栏的边距为 30 像素。

html css css-specificity
1个回答
0
投票

图像：背景会覆盖背景图像，因此请使用背景颜色。

30px 边距：在标题（或导航）上设置 30px 上边距。

查看我的编辑评论以了解具体编辑。

/* EDIT If you want to see your h1 on the black background, you need to set the font color to not black */
h1 {
  color: gray;
}


body {
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: sans-serif;
}

header {
  background-color: black;
  padding: 20px;

  /* EDIT The 30px margin you want for nav */
  margin-top: 30px;
}

header a {
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  margin-top: 30px;
}

header .logo a {
  /* EDIT Debug */
  /* background-image: url('images/TestSiteLogo.png'); */
  background-image: url('https://placebear.com/100/100.jpg');

  /* EDIT You likely want no-repeat for the image */
  background-repeat: no-repeat;

  /* EDIT background overwrites background-image, so use background-color */
  /* background: red; */
  background-color: red;

  display: inline-block;
  text-indent: -9999px;
  width: 300px;
  height: 100px;
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

div {
  background-color: hsl(0 100% 50%);
  width: 100px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin-right: 10px;
  display: inline-block;
}

footer {
  background-color: black;
  padding: 20px;
  color: white;
}
<header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="pages/menu.html">Menu</a></li>
      <li class="logo"><a href="index.html">Dummy Website Logo</a></li>
      <li><a href="pages/locations.html">Locations</a></li>
      <li><a href="pages/contact.html">Contacts</a></li>
    </ul>
    
    <h1>Home</h1>
  </nav>
</header>

<section id='three'>
  <div class="triple">a</div>
  <div class="triple">b</div>
  <div class="triple">c</div>
</section>

<section>lower-section</section>

<footer>footer</footer>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.