CSS通配符选择器-没有覆盖？

Question

Can anyone tell me why the last span is dotted? Why isn't it overwritten?

Forkable pen https://codepen.io/anon/pen/pqjREd

 div div div * span { border: double; } div * * span { border: dotted; } div * { border: dashed; } div { border: none; } 

 <div> Line 1 <br> <span>Line 2</span> <br> <div> Line 3 <br> <span>Line 4</span> <br> <div> Line 5 <br> <span>Line 6</span> <br> </div> </div> </div> 

Answer 1

Let's break this down rule by rule.

Let's assume you've now heard of the term specificity, as others have alluded to in the comments. But let's assume either that you don't know anything about it beyond that it has something to do with your problem, or that you've read the links given to you but you're having trouble applying that knowledge to this specific problem.

To start, specificity only takes into account selectors that match the element to begin with. Since a div and a span are two different things, the last rule is irrelevant, so let's get rid of that:

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Now we have three rules, two of which ask for a span specifically, and the third, any element.

The first rule, div div div * span , doesn't match the "Line 6" element, because its div ancestors only go up to three levels. There is no fourth level between the innermost div and the span , and the parent of the outermost div is not another div , but body . So the only two rules that actually match this element are:

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Now we can talk specificity. The universal selector * has zero specificity. All of your rules have only type selectors and/or universal selectors, so calculating their specificity is fairly straightforward:

div * * span /* 2 types -> specificity = (0, 0, 2) */
div *        /* 1 type  -> specificity = (0, 0, 1) */

In conclusion, because the dotted border rule is more specific, the dashed border rule doesn't override it.