子元素的CSS选择器

Question

试图为此找到CSS选择器，但无法成功。

我需要有类rtIn的Span，它的父UL必须是li的子级

我试过了，但它适用于每一个节点。

.rtLI > ul > li > div > Span.rtIn {
    font-size: 10px;
}

<ul class="rtUL">
    <li class="rtLI">
        <div class="rtTop">
            <span class="rtSp">Parent</span>
            <span class="rtMinus"></span>
           <span class="rtIn"></span>
        </div>
        <ul class="rtUL">
            <li class="rtLI rtLast">
                <div class="rtBot">
                    <span class="rtSp"></span>
                    <span class="rtIn">Child</span>// i required this Span
                </div>
            </li>
        </ul>
    </li>
    <li class="rtLI">
        <div class="rtMid">
            <span class="rtSp"></span>
            <span class="rtIn">Child</span>
        </div>
    </li>
    <li class="rtLI rtLast">
        <div class="rtBot">
            <span class="rtSp"></span>
            <span class="rtIn">Child</span>
        </div>
    </li>
</ul>

有什么修正吗？

这是fireFox和Chrome的输出

​

​

Answer 1

​

.rtLI > ul > li > div > Span.rtIn {
    font-size: 10px;
}

    <ul class="rtUL">
     <li class="rtLI">
       <div class="rtTop">
        <span class="rtSp"></span>
         <span class="rtMinus"></span>
          <span class="rtIn"></span>
        </div>
        <ul class="rtUL">
         <li class="rtLI rtLast">
           <div class="rtBot">
             <span class="rtSp"></span>
             <span class="rtIn"></span>// i required this Span
           </div>
         </li>
        </ul>
       </li>
       <li class="rtLI">
        <div class="rtMid">
         <span class="rtSp"></span>
         <span class="rtIn"></span>
        </div>
       </li>
      <li class="rtLI rtLast">
       <div class="rtBot">
         <span class="rtSp"></span>
         <span class="rtIn"></span>
        </div>
       </li>
     </ul>

​

选择器起作用了！

您的HTML语法错误y您的HTML代码：

你有：

   span class="rtIn"></span>

而且应该是：

   <span class="rtIn"></span>

谷歌Chrome正在推出CSS样式：

​

​

Answer 2

这是实际的选择器。

.rtLI > ul > li > ul > li.rtLI > div > Span.rtIn {
    font-size: 10px;
    color: red;
}

_JSFiddl_e：http://jsfiddle.net/blackcrown/w4fpc8Le/3/

这个答案可以是即兴的，如果Span在N个深度，那么它就不是一个好的答案。

Answer 3

我知道这个问题已经解决了，但我只是想把这个扔出去.

您可能只需要使用nth子伪选择器，而不是在每个容器上使用类。

Chris Coyiers网站www.css-tics.com提供了关于其工作方式的非常有用的信息：

http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

http://css-tricks.com/examples/nth-child-tester/