When combining selectors does space means the same

问题:

In CSS combining selectors with space means descendance.

But in another answer How to combine class and ID in CSS selector? I read, that similar syntax means coinciding selected markers in one tag.

Does CSS parser really distinguish space and no-space, or this is the same syntax which is just working in both cases?

回答1:

Yes, spaces are significant in CSS rules.

#tag.flower means an element with both id="tag" and class="flower", where #tag .flower means an element with class="flower" inside of an element with id="tag".

For instance:

#tag.flower

<div id="tag" class="flower"></div>

#tag .flower

<div id="tag">
    <div class="flower"></div>
</div>

回答2:

A space in CSS selectors, like:

.foo .bar {...

indicated a descendant element. This would target the inner div with class "bar" for example,

<div class="foo">foo
    <div class="bar">bar</div>
</div>

jsFiddle example

Removing the space means that the you are selecting an element has has both classes, like:

.foo.bar {...

Which would target the div with both classes foo and bar in this example:

<div class="foo">foo
    <div class="foo bar">foo and bar</div>
</div>

jsFiddle example

回答3:

To select .bee which is direct descendant of .aye:

.aye > .bee {...}

To select element .aye and element .bee:

.aye, .bee {...}

To select .bee which is just a descendant of .aye (not necessarily direct descendant):

.aye .bee {...}

To select an element that is both .aye and .bee:

.aye.bee {...}