Html CSS选择器差异

这个问题可能已经询问和回答了一百万次，但我只想知道使用.div1>.div1-1与.div1.div1-1的区别

我知道>是子选择器，所以.div1 parent>是.div1-1 child

使用哪种方法是最佳实践？

试试：

<style>
    .div1 .div1-1 {color: red;} /* all children */
    .div1 > .div1-1 {background: blue;} /* direct children */
</style>

<div class="div1">
    <div class="div1-1">Test</div>
</div>

// both .div1 > .div1-1 and .div1 .div1-1 do the same
// both rules are applied

vs

---

满足您需求的那一个。>指的是孩子，而不是孙子。哪一个最好？这取决于你的结构。你已经试过谷歌了吗？非常instructive@DanielPinzon就特异性而言，它们都有相同的价值。你要求OP在这里尝试什么？

<style>
    .div1 .div1-1 {color: red;} /* all children */
    .div1 > .div1-1 {background: blue;} /* direct children */
</style>

<div class="div1">
    <div class="div1-1">Test</div>
</div>

// both .div1 > .div1-1 and .div1 .div1-1 do the same
// both rules are applied

<style>
    .div1 .div1-1 {color: red;} 
    .div1 > .div1-1 {background: blue;}
</style>

<div class="div1">
    <div>
        <div class="div1-1">Test</div>
    </div>
</div>

// Just .div1 .div1-1 change styles to '.div1-1'
// The first rule is applied only