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.
div * * span
doesn't make much sense