css - これら 2 つのスタイル ルールの違いは何ですか?

Question

重複の可能性:
CSS 子セレクターと子孫セレクター

それで、ここでの違いは何ですか？

div a {
  /* Styles here */
}

と

div > a {
  /* Styles here */
}

本当にわかりません。

Answer 1

spaceは子孫コンビネータで、>は子コンビネータです。子は直接の子孫を意味し、子孫は親要素のサブツリー内のどこかにあるノードを意味します。

Answer 2

簡単に言えば：

div a {/*properties*/} 

これにより、指定されたスタイルが選択され、「div」内のすべての「a」要素に適用されます。

---

「>」記号は「子コンビネータ」です。

div > a {/*properties*/}

これにより、div内の直接の子'a'タグのみが選択されます。

例：
css：

div > a {color: red}

html：

<div>
    <a href="#">Link One</a>
    <span>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>
    </span>
    <a href="#">Link Four</a>
</div>

ここでは、赤い色は「リンク1」と「リンク4」にのみ適用されます。「リンク2」と「リンク3」は「スパン」要素内にネストされているため、選択されていません。

それらで遊んでください：http：//dabblet.com/gist/3730661

CSSセレクターの詳細については、http：//css-tricks.com/child-and-sibling-selectors/を参照してください。