Why are spaces used to separate things in css

问题:

Here is something in a wordpress stylesheet that I don't understand:

blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}

what does the space between blockquote and cite do? I understand if they are separated by a comma, then both blockquote and cite will have "font-style: normal;" now they are separated by space, does this mean if a blockquote tag is embedded into a cite tag it will get "font-style: normal;"?

Thank you.

回答1:

The space is known as the descendant combinator. blockquote cite selects any cite element within a blockquote element. Likewise for blockquote em and blockquote i.

In other words, it's not "if a blockquote tag is embedded into a cite tag", it's the other way around (besides, you can't place blockquotes in cites in the first place).

As you note, commas group selector sequences into the same rule.

回答2:

This means target the cite tag inside the blockquote etc.

In this instance, the site is attempting to override all italics set inside a blockquote.

回答3:

A space between selectors will cause the style sheet to apply the rule selectively. A space is the descendant selector or combinator. It applies to any descendant element within the descender.

A rule of blockquote cite { font-style: normal; } would only apply the font style to both item 1 and item b. Both item 1 and item b are descendants of item A. item A will not get the rule.

 A. item A (Blockquote)
   1. item 1 (Cite)
     a. item a
     b. item b (Cite)
   2. item 2

This is slightly similar to the > selector. That is the child selector. It applies to any child of an element. A child is a 1st level descendant. In the table above with rule blockquote > cite { font-style: normal; } instead, item b would not get the font-style rule applied, as it is a 2nd level descendant, hence not a child. item A would also not get rule.

If you want both blockquote and any cite within blockquote to get the rule, they must both be listed:

blockquote, blockquote cite { font-style: normal; }