スペース "a> b"とスペース "a> b"のないCSS子セレクタの違いは何ですか？

Question

両者に違いはありますか？

例1：

a>b{ 
    display: block; 
} 

例2：

a > b{ 
    display: block; 
} 

Answer 1

CSSは非常に寛容です。次のセレクタは、体の子であるAPエレメント表し

：（ここではあなたの>など）コンビネータの周りの空白文字はオプションでCSSセレクタ仕様mentiones

body > p 

を次の例は、子孫コンビネータを組み合わせて、子コンビネータ。

div ol>li p 

これは、li要素の子孫であるp要素を表します。 li要素はol要素の子要素でなければなりません。 ol要素はdivの子孫でなければなりません。 ">"コンビネータの周りのオプションの空白は除外されていることに注意してください。

— Section 8.2 of the CSS Selectors Level 3 recommendation

これをバック促進するために、仕様の文法セクションでは、実装アプローチと、これは本当に見かけます：

combinator 
    /* combinators can be surrounded by whitespace */ 
    : S+ | S* [ '>' | '+' | '~' | COLUMN | '/' IDENT '/' ] S* 
    ; 

— Section 10 of the CSS Selectors Level 3 recommendation

このため、

CSSパーサは、単にスペースを取り除く必要があるとして、以下はすべて有効です。

a>b {} 
a > b {} 
a> b {} 
a >b {} 
a  > b {} 

をだからあなたの質問に答えるために：いいえ、違いはありませんが。

ただし、どちらを使用するべきかは、純粋に個人的な好みの問題です。私にとっては、a > bを選ぶのは、読みやすくするためだと思うからですが、a>bまたはa > bと入力すると、それは完全にあなた次第です。あなたのコードを読まなければならない人はいないでしょう後者のアプローチで1番のファン！

Answer 2

そのような差はありません。デモについては、以下のスニペットを参照してください。

.a>.b{ 
 
    color: red; 
 
} 
 

 
.c > .d{ 
 
    color: red; 
 
}

<div class="a"> 
 
    Class a 
 
    <div class="b"> 
 
    Class b 
 
    </div> 
 
</div> 
 

 
<div class="c"> 
 
    Class c 
 
    <div class="d"> 
 
    Class d 
 
    </div> 
 
</div>

Answer 3

まず第一に、両方が動作する間、またはない何の効果スペースはありません。

例は、以下のDOM構造で動作します：

<a><b></b></a> 

Answer 4

両者の間に違いはありません。