CSS中的“>”选择器是子选择器。例如，div > p选择所有直接位于div内的段落。

这个问题出现的原因是，人们想要选择特定元素的直接子元素，而不是选择所有后代元素。通过使用“>”选择器，可以只选择特定元素的直接子元素。

要解决这个问题，只需要在CSS中使用“>”选择器即可。在选择器中，将“>”放置在父元素和子元素之间，这样就可以选择特定元素的直接子元素了。

更多关于CSS“>”选择器的信息，可以查看这个链接。

CSS中的“>”选择器是用来选择所有直接的子元素的。与之相比，空格选择器会选择所有深层次的后代元素，而“>”选择器只会选择所有直接的子元素。

解决方法是使用“>”选择器来限制选择只在直接的子元素之间进行，而不会选择更深层次的后代元素。

下面是一个例子：

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* 每个John都是红色的 */
.b > b { color: blue; } /* 只有John 3和John 4是蓝色的 */

  
John 1
  
John 2
  John 3
  John 4


  
John 1
  
John 2
  John 3
  John 4

在这个例子中，使用“.a b”选择器会将所有的“John”都设置为红色，而“.b > b”选择器只会将“John 3”和“John 4”设置为蓝色。

需要注意的是，“>”只会查找下一级的子元素，不会继续向下查找更深层次的后代元素。

CSS中的“>”选择器是用来选择直接子元素的。如果你有如下嵌套的div：

    

        
...
    
    

        
...
    

并且在你的样式表中声明了如下的css规则：

.outer > div {
    ...
}

这个规则只会应用到那些具有"class"为"middle"的div元素上，因为这些div元素是"class"为"outer"的元素的直接子元素（除非你声明了其他更具体的规则覆盖这些规则）。如果想查看具体效果，请参考这个fiddle。

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

  div.outer - 这是父元素。
  

    div.middle - 这是"class"为"outer"的元素的直接子元素。它会有橙色的边框。
    
div.inner - 这是"class"为"middle"的元素的直接子元素。它不会有橙色的边框。
  
  

    div.middle - 这是"class"为"outer"的元素的直接子元素。它会有橙色的边框。
    
div.inner - 这是"class"为"middle"的元素的直接子元素。它不会有橙色的边框。
  

Without Words

  

    
...
  
  

    
...
  

通过上述代码可以看到，div.outer元素是父元素，div.middle是“outer”的直接子元素，div.inner是“middle”的直接子元素。其中，div.middle会有橙色的边框，而div.inner不会有橙色的边框。

需要注意的是，如果选择器之间使用的是空格而不是“>”，那么规则将适用于所有嵌套的div元素，而不仅仅是直接子元素。空格符代表的是“后代选择器”，这意味着它会在整个树结构中查找匹配的元素，而不仅仅是直接子元素，而“>”只会查找直接子元素。

需要注意的是，IE6不支持“>”选择器，但其他当前的浏览器都支持，包括IE7和IE8。如果你正在研究不常用的CSS选择器，你可能还想看看“+”、“~”和“[attr]”选择器，它们都非常有用。

这个页面列出了所有可用的选择器，并详细介绍了它们在各种浏览器中的支持情况（主要是IE存在问题），并提供了它们的使用示例。如果你已经在使用[attr]选择器，那么使用“>”和“~”选择器也是安全的，因为这三个选择器在浏览器的支持程度上差不多。在IE7和IE8中，“+”选择器有些问题，但是可以使用。

需要注意的是，你提供的quirksmode页面并没有提到这些选择器的信息。这个页面在这段时间发生了变化。新的链接是quirksmode.org/css/selectors。我会在回答中更新链接。

值得注意的是，“>”只会在标记结构一级深度下查找，而不会进一步深入。