Question

div > p {
    background-color: yellow;
}

似乎与

的评价不同

div p {
    background-color: yellow;
}

但是我会不知道有什么影响吗？似乎使用＆gt;至少是更合适的风格。

Answer 1

有区别; >是“紧随其后”。因此，div > p适用于此处的p：

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

但不在这里：

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

可以在CSS specification for child selectors。

中找到更详细的说明

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>

#container＆gt;的选择器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，现在无论它在层次结构中有多深（包括孙子和曾孙）。

Answer 4

div>p

表示P是div的DIRECT子项

div p

表示p是div的后代，而不是

例如，检查Fiddle。

Answer 5

＆gt; selector用于选择特定元素的子元素。

是＆gt;在CSS中选择子元素时必需的符号？

5 个答案: