Why do comma delimited CSS break the general rule when one part is unknown?

Question

Explanation of the problem:

So, if you have a CSS rule that looks something like this:

h1, h1 a:hover {
  color: blue;
}

It works great, the example may be the best in terms of usability, but it works. (And this works to demonstrate the problem ...)

But if you add a comma separated ( , ) that the browser does not understand, the hole rule is ignored.

 h1, h1 a:hover, h1:focus-within {
    color: blue;
 }

A browser that does not understand : the alias of the focus-in class ignores the entire rule . This means that even h1 will not receive the specified rule.

---

Then he wonders why this is so:

Do not misunderstand me. Ignoring things they don’t know is a very powerful feature in CSS!

, , , ?

, , . , , , , .

, - , , , .

---

:

, "" :

h1, h1 a:hover {
    color: blue;
}
h1:focus-within {
    color: blue;
}

. (- "" )

.

Answer 1

, 3 ( ):

, . , .

CSS:

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

is not equivalent to:

h1, h2..foo, h3 { font-family: sans-serif }

(h1, h2..foo, h3) . ( , h2..foo.)

---

CSS 2 , , . , W3C , :

. ,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

: (thx @BoltClock):

CSS 2.1 , , CSS3:

(...), "& amp;" CSS 2.1, CSS 2.1 .