覆盖CSS中的边框样式

Question

I have a three types of boxes being displayed in the image (2,3, and 4)

The first element is the selected style of a box.

I would like to apply this selected style on the other three.

• For 2 it is straight forward. The gray goes to black.
• For 3 I would need to replace the dashed with a solid line.
• For 4 I would replace the gray with the black, but I would want to keep the image.

However I am trying to understand how it would work with inheritance in CSS. I am just adding a class 'active' to mark it as selected. It works fine for 2, but for 3 and 4 it does not know how to process the order of class names. I cannot remove the classes of the elements, because obviously I want to cascade the changes through (like the image in option 4).

My CSS looks like this :

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;
}

I have demonstrated this in a JSFiddle :

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

It's probably an obvious question, but how do I get the 'active' style to overwrite the styles on box 3 and 4?

Answer 1

Overwrite the background and border and move the css to the bottom, or make the css more specific (read more about css specifity) (by adding ul )

 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; } } ) 

 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; } 

 <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> 

Answer 2

The issue you are having is called 'specificity' and is best explained by the blog post commonly known as ' specificity wars '.

In a nutshell, each element has a specificity value.

• Elements, like li have a value of 1.
• Classes, like .sold have a specificity of 10.
• IDs, like #box have a specificity of 100.

By combining these values, you can overwrite less specific items.

The order of the rules also change the specificity. If you have two items with a matching specificity score, the later of the two will shine through.

As such, you can overwrite your li.sold rule (score of 11) by adding a li.sold.selected rule (score of 21).

You can also involve parent element ids to increase specificity. For example:

div.man (score of 11)

#house div.man (score of 111)

#London #house div.man (score of 211)

This is the basics of specificity. I recommend you read the article also - which puts the concept in terms of StarWars, which is always appreciated.