子元素的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

＆＃13;

＆＃13;

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

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

选择器正在工作！

您的HTML代码存在 HTML语法错误：

你有：

   span class="rtIn"></span>

应该是：

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

Google 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-child伪选择器而不是在每个容器上使用类。

Chris Coyiers网站www.css-tricks.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/