在CSS中选择子元素时是否需要>符号？

Question

div > p {
    background-color: yellow;
} 

的评估结果似乎与

div p {
    background-color: yellow;
} 

但会不会有我不知道的效果呢？至少，使用该>似乎更合适。

Answer 1

这是有区别的；>是“立即跟进”。因此，您的div > p将适用于这里的p：

<div>
    <p>Text here</p>
</div>

但这里不行：

<div>
    <table>
        <tr>
            <td>
                <p>Text here</p>
            </td>
        </tr>
    </table>
</div>

在子选择器的CSS规范中可以找到更详细的描述。

Answer 2

看看这个例子可能对你有帮助..。

div#container > ul {

边框: 1px实心黑色；}

.

<div id="container">   <ul>
  <li> List Item
    <ul>
       <li> Child </li>
    </ul>
  </li>
  <li> List Item </li>
  <li> List Item </li>
  <li> List Item </li>   </ul> </div>

容器> ul的选择器将只针对具有容器id的div的直接子级uls。例如，它不会针对作为第一个李子的ul。

因此，使用子组合器有性能上的好处。实际上，特别是在使用基于JavaScript的CSS选择器引擎时，建议使用它。.读这个：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048，它会帮助你。

Answer 3

div > p选择直接子p (只有儿子)，

div p选择了它所有的孩子p，现在不管它在等级体系中有多深(包括孙子和曾孙)。