CSS继承类不起作用

Question

I have two div elements:

  <div  class = "clsdiv1">Hello</div>
  <div  class = "clsdiv2">Bye</div>

and those css classes:

.clsdiv{
  background: red;
}

.clsdiv1 {
  background: black;
  border: 2px solid black;
}
.clsdiv2 {
  background: green;
  border: 2px solid white;
}

I want the clsdiv1 and clsdiv2 inherit background color from clsdiv class,so I implement it this way:

.clsdiv1 .clsdiv{
  background: inherit;
  border: 2px solid black;
}
.clsdiv2 .clsdiv{
    background: inherit;
  border: 2px solid white;
}

But inheritance not working,any idea what I'm missing? Why inheritence not working?

Answer 1

Yes, you are not referencing the class name that should get inherited at the element. If you want to make it work with your current CSS, you may use the following markup:

<div  class = "clsdiv clsdiv1">Hello</div>
<div  class = "clsdiv clsdiv2">Bye</div>

You don't even need to inherit the background color, as it already was set to the same element:

.clsdiv {
    background: red;
}
.clsdiv1 {
    border: 2px solid black;
}
.clsdiv2 {
    border: 2px solid white;
}

On the other hand, such a setup has nothing to do with inheritance…

Answer 2

Well you are approaching it the wrong way.

<div  class = "clsdiv">Hello</div>
<div  class = "clsdiv">Bye</div>

.clsdiv{
  background: red;
}

if you want both div to have red color background give them the same class