在wordpress中组合CSS声明

Question

在WordPress中，它使用li来声明菜单项，两个CSS声明#navigator > li和#navigator li之间有什么区别？

Answer 1

实际上，这不是在WordPress中，而是一个CSS选择器行为：

根据定义

，空格为Descendant Selector

  

仅匹配与第二个选择器匹配的元素，其中有一个与第一个选择器匹配的祖先元素。后代选择器与子选择器类似，但它们不要求匹配元素之间的关系是严格的父子关系。

在您的情况下，#navigator li将匹配li内任何嵌套级别的所有#navigator。

示例：

<ul id="#navigator">
    <li> <!-- this is selected -->
        <div>
           <ul>
               <li> <!-- this is selected -->

另一方面

>是Child Selector，即：

  

仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的直接子元素。

在您的情况下，#navigator > li仅匹配li的直接子项#navigator。

示例：

<ul id="#navigator">
    <li> <!-- only this is selected -->
        <div>
           <ul>
               <li>

Answer 2

这两者之间的区别在于＆gt;选择器（#navigator > li）表示直接子项，#navigator li表示li作为祖先的所有#navigator。