CSS 选择器差异

【问题标题】：CSS Selector differencesCSS 选择器差异
【发布时间】：2015-04-20 23:26:08
【问题描述】：

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

我知道“>”是子选择器所以.div1 (parent) > .div1-1 (child)。

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

.div1 > .div1-1{ color:red;}

哪种方法是最佳实践？

【问题讨论】：

满足您需求的那一款。
> 表示只有孩子（而不是孙子）。哪个最好？这取决于您的结构。
你已经试过用谷歌搜索了吗？
css.maxdesign.com.au/selectutorial 很有启发性
@DanielPinzon 就特异性而言，它们具有相同的值。

标签： html css css-selectors

【解决方案1】：

试试：

<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

http://jsfiddle.net/yb1Lfsd8/

对比

<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

http://jsfiddle.net/yb1Lfsd8/1/

【讨论】：

你要求 OP 在这里“尝试”什么？