Question

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
  background-color: #23272A;
}

.header
{
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 5px #FF9F00 solid;
  font-size: 15px;
  display: flex;
  align-items: center
}

#logo img
{
  float: left;
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
  background-color: #2C2F33;
}

.navbar
{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li
{
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a
{
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}

.navbar,
li,
a:hover
{
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#forumpoints,
#dsh
{
  color: #FF9F00;
}

#dosh
{
  color: #FFFFFF;
}

<html>

  <head>

    <meta charset="utf-8">
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Arszilla">

    <title>Website</title>

  </head>

  <body>

    <div class="header">

      <div id="logo">

        <img src="./img/logo.png"></img>

      </div>

      <div class="navbar">

        <div id="leftnavbar">

          <ul>

            <li><span id="forumpoints">Forum Points:</span> <span id="dosh">1.00000000</span> <span id="dsh">Dosh</span></li>

          </ul>

        </div>

        <div id="rightnavbar">

          <ul>

            <li><a href="index.html">Button 1</a></li>

            <li><a href="index.html">Button 2</a></li>

            <li><a href="index.html">Button 3</a></li>

            <li><a href="index.html">Button 4</a></li>

          </ul>

        </div>

      </div>

    </div>

我想让标题具有＃2C2F33的颜色，这将比所有颜色（*）更亮但是我得到的结果如下图所示

我不知道如何执行此操作，就像我将background-color: #2C2F33;插入.navbar, li, a那样有一些差距

我如何解决这个问题，因为我不具备HTML / CSS方面的经验，现在需要帮助。

Answer 1

您可以将background-color: #2C2F33提供给header *，如下所示：

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
  background-color: #23272A;
}

.header
{
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 5px #FF9F00 solid;
  font-size: 15px;
  display: flex;
  align-items: center
}

#logo img
{
  float: left;
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
  background-color: #2C2F33;
}
.header *{
    background-color: #2C2F33;
 }
.navbar
{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li
{
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a
{
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}

.navbar,
li,
a:hover
{
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#forumpoints,
#dsh
{
  color: #FF9F00;
}

#dosh
{
  color: #FFFFFF;
}

<html>

  <head>

    <meta charset="utf-8">
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Arszilla">

    <title>Website</title>

  </head>

  <body>

    <div class="header">

      <div id="logo">

        <img src="./img/logo.png"></img>

      </div>

      <div class="navbar">

        <div id="leftnavbar">

          <ul>

            <li><span id="forumpoints">Forum Points:</span> <span id="dosh">1.00000000</span> <span id="dsh">Dosh</span></li>

          </ul>

        </div>

        <div id="rightnavbar">

          <ul>

            <li><a href="index.html">Button 1</a></li>

            <li><a href="index.html">Button 2</a></li>

            <li><a href="index.html">Button 3</a></li>

            <li><a href="index.html">Button 4</a></li>

          </ul>

        </div>

      </div>

    </div>

Answer 2

你可以给予

.header * {
  background: #2C2F33;
}

或者你可以在标题之后将主体颜色包裹在另一个div周围。

<div class="main">
   the rest of your stuff
</div>

然后再做

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
}

用

.main {
  background-color: #23272A;
}

那将是更好的＆＃34;的CSS。

Answer 3

原因是，为什么你的导航栏背景颜色比标题更深，这是因为你为每个元素赋予了这个深色背景（这就是*选择器的作用）。现在因为导航栏是标题的子项，它们被绘制在标题上方并且已经设置了自己的背景颜色，我们无法看到标题所具有的颜色。

尝试只为身体提供较暗的背景：

* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}

body {
background-color: #23272A;
}

在标题

3 个答案: