覆盖CSS

Question

我在图像中显示了三种类型的框（2,3和4）

第一个元素是盒子的 选择 样式。

我想在其他三个上应用这个选定的风格。

• 对于2，它是直截了当的。灰色变黑了。
• 对于3，我需要用实线替换虚线。
• 对于4我会用灰色替换灰色，但我想保留图像。

但是我试图了解它如何在CSS中继承。我只是添加了一个“有效”类来将其标记为已选中。它适用于2，但对于3和4，它不知道如何处理类名的顺序。我无法删除元素的类，因为显然我想要通过级联更改（如选项4中的图像）。

我的CSS看起来像这样：

li {
  padding: 0.125rem;
  margin: 0.4375rem 1.0625rem 0.3125rem 0;
  border: 0.0625rem solid #d9d9d9;
}

li.active {
  border: 0.0625rem solid black;
}

li.sold {
  display: inline-block;
  border: 1px solid #ccc;
  background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
  background-size: 100% 100%;
}

li.wait-list {
  display: inline-block;
  border: 1px dashed #ccc;
}

我在JSFiddle中证明了这一点：

https://jsfiddle.net/561aLm4z/7/

这可能是一个显而易见的问题，但如何让“主动”风格覆盖第3栏和第4栏的样式？

Answer 1

覆盖背景和边框并将CSS移至底部，或使css更具体(read more about css specifity)（通过添加ul）

＆＃13;

＆＃13;

add1 = false
add2 = false
add3 = false
add4 = false

$("#2").click(
  function() {
    if (!add2) {
      $("#2").addClass("active")
      add2 = true;
    } else {
      $("#2").removeClass("active")
      add2 = false;
    }
  }
)

$("#3").click(
  function() {
    if (!add3) {
      $("#3").addClass("active")
      add3 = true;
    } else {
      $("#3").removeClass("active")
      add3 = false;
    }
  }
)

$("#4").click(
  function() {
    if (!add4) {
      $("#4").addClass("active")
      add4 = true;
    } else {
      $("#4").removeClass("active")
      add4 = false;
    }
  }
)

＆＃13;

li {
  padding: 0.125rem;
  margin: 0.4375rem 1.0625rem 0.3125rem 0;
  border: 0.0625rem solid #d9d9d9;
}
li.sold {
  display: inline-block;
  border: 1px solid #ccc;
  background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
  background-size: 100% 100%;
}
li.wait-list {
  display: inline-block;
  border: 1px dashed #ccc;
}
ul li.active {
  border: 0.0625rem solid black;
  background: none;
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="hse-product-variant ">
  <li id="1" style="display: inline-block;" class="active">
    1
  </li>
  <li id="2" style="display: inline-block;" class="">
    2
  </li>
  <li id="3" style="display: inline-block;" class="wait-list">
    3
  </li>
  <li id="4" style="display: inline-block;" class="sold">
    4
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您遇到的问题被称为特异性＆＃39;最常见的博客文章通常称为＆＃39; specificity wars＆＃39;。

简而言之，每个元素都有一个特异性值。

• li 等元素的值为1.
• 类如 .sold 的特异性为10。
• ID，如 #box 的特异性为100。

通过组合这些值，您可以覆盖不太具体的项目。

规则的顺序也会改变特异性。如果你有两个具有匹配特异性分数的项目，那么两个项目中的后一个将会发光。

因此，您可以通过添加 li.sold.selected 规则（得分为21）来覆盖 li.sold 规则（得分为11）。

您还可以使用父元素ID来提高特异性。例如：

div.man（得分11）

#house div.man（得分111）

#London #house div.man（得分211）

这是特异性的基础。我建议你也阅读这篇文章 - 它将这个概念放在StarWars中，这一点一直很受欢迎。