为什么我的background-color不适用于特定的类选择器？

问题描述

我是HTML，CSS的新手。最近，我正在学习CSS网格属性。我用div容器创建了一些盒子，并使用类选择器创建了一些盒子。但是我想为类taco的特定项目赋予样式。

尽管我在.container div中定义了背景颜色”，但是我无法在名为background-color的特定项目中更改taco。我尝试通过添加background-color div中的类名为taco的内联CSS。

在这种情况下，background-color有效，但是当我尝试在style.css文件中执行相同的操作时，background-color对于该特定项目“ taco”不起作用。我在这里想念什么？

* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  background-image: url(images/topography.svg),linear-gradient(110deg,#f93d66,#6d47d9);
  background-size: 100%;
  background-attachment: fixed;
}

.container div {
  background-color: rgb(182,182,58);
  text-align: center;
  font-weight: lighter;
  font-size: 30px;
  font-family: 'Permanent Marker',cursive;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(5,1fr);
}

.taco {
  grid-column: 1/ -2;
  grid-row: span 2;
  background-color: #ffffff;
  /*background-color: #ffffff; doesn't work*/
}

<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="taco">&#127790;</div>
  <!--style="background-color: #ffffff;" works-->
  <div class="item item10">10</div>
  <div class="item item11">11</div>
  <div class="item item12">12</div>
  <div class="item item13">13</div>
  <div class="item item14">14</div>
  <div class="item item15">15</div>
  <div class="item item16">16</div>
  <div class="item item17">17</div>
  <div class="item item18">18</div>
  <div class="item item19">19</div>
  <div class="item item20">20</div>
  <div class="item item21">21</div>
  <div class="item item22">22</div>
  <div class="item item23">23</div>
  <div class="item item24">24</div>
  <div class="item item25">25</div>
  <div class="item item26">26</div>
  <div class="item item27">27</div>
  <div class="item item28">28</div>
  <div class="item item29">29</div>
  <div class="item item30">30</div>
</div>

解决方法

问题是您遇到了特异性问题：

.container div比.taco更具体。如果将div.taco添加为选择器，则会得到更具体的CSS选择器。

* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  background-image: url(images/topography.svg),linear-gradient(110deg,#f93d66,#6d47d9);
  background-size: 100%;
  background-attachment: fixed;
}

.container div {
  background-color: rgb(182,182,58);
  text-align: center;
  font-weight: lighter;
  font-size: 30px;
  font-family: 'Permanent Marker',cursive;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(5,1fr);
}

div.taco {
  grid-column: 1/ -2;
  grid-row: span 2;
  background-color: #ffffff;
  /*background-color: #ffffff; doesn't work*/
}

<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="taco">&#127790;</div>
  <!--style="background-color: #ffffff;" works-->
  <div class="item item10">10</div>
  <div class="item item11">11</div>
  <div class="item item12">12</div>
  <div class="item item13">13</div>
  <div class="item item14">14</div>
  <div class="item item15">15</div>
  <div class="item item16">16</div>
  <div class="item item17">17</div>
  <div class="item item18">18</div>
  <div class="item item19">19</div>
  <div class="item item20">20</div>
  <div class="item item21">21</div>
  <div class="item item22">22</div>
  <div class="item item23">23</div>
  <div class="item item24">24</div>
  <div class="item item25">25</div>
  <div class="item item26">26</div>
  <div class="item item27">27</div>
  <div class="item item28">28</div>
  <div class="item item29">29</div>
  <div class="item item30">30</div>
</div>

以下是有关特异性的一些文档： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

还有更多来自堆栈溢出的信息： Understanding CSS selector priority / specificity