Question

所以我是新手，但是我从W3学校抓住了这个，我正在尝试在课堂上使用一种颜色 - 所以我创建了样式部分并试图应用颜色，但它不起作用。我知道这与外部样式表相关联，所以也许这会覆盖我想要做的事情。否则，我看不清楚该做什么，我用Google搜索了一个小时左右，此时我需要有更多知识帮助我的人。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .label label-default {
      background color: #330000;
    }
  </style>

</head>

<body>



  <h1><span class="label label-default">Survey</span>



</body>

</html>

Answer 1

你有3个问题

选择器不好。 <span class="label label-default">。如果要选择此选项，则需要编写.label.label-default

你应该使用multi class selector，在这里阅读 - ＆gt; multi class selector

详细了解CSS Selectors

background color样式也不正确。您需要写background-color

在此处阅读更多内容 - ＆gt; background-color

h1

</h1>代码
在此处阅读更多内容 - ＆gt; HTML Elements

我自己的问题 - ＆gt;如果您不拆分内容或为了其他原因，为什么在span内使用h1？例如<h1><span class="font-light">Light</span>Not Light</h1>。

如果您没有特殊理由在h1内使用span，则应直接在classes上添加h1
```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
  .label.label-default {
  background-color:#330000;
  }
  
  </style>
  
</head>
<body> 
 


  <h1><span class="label label-default">Survey</span></h1>
  


</body>
</html>
```
我知道这与外部样式表相关联，所以也许这会覆盖我想要做的事情 - ＆gt;链接的样式表是一个引导样式表。要检查是否覆盖了您自己的自定义CSS，请在开发人员控制台中检查您的代码，看看您的样式是否被删除。然后他们被覆盖。

我用Google搜索了一个小时左右 - ＆gt;然后你应该学习如何问谷歌。你遇到的问题非常基本。 Google-ing multi class selector css甚至2 classes css + background color css会给你很多结果和答案

Answer 2

首先，您在类选择器中缺少.，接下来您必须删除选择器之间的空间，因为它们应用于同一个元素。您还必须将-添加到background-color属性。最后关闭h1标记，您就完成了：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
  .label.label-default {
  background-color:#330000;
  }
  
  </style>
  
</head>
<body> 
 


<h1><span class="label label-default">Survey</span></h1>
  


</body>
</html>

Answer 3

你的CSS不正确，首先是＆＃34;背景颜色＆＃34;不是＆＃34;背景颜色＆＃34;

和第二个如果你想为相同的div类应用css，那么你不应该为类名提供空间，例如＆＃34; .label .label-default＆＃34;

你必须编写没有这样的空格的类名＆＃34; .label.label-default＆＃34;

试试这个

  <style>
  .label.label-default {
      background-color:#330000;
  }
  </style>

而不是

  <style>
  .label .label-default {
      background color:#330000;
  }
  </style>

CSS将颜色从灰色更改为＃330000

3 个答案: