Селектор CSS для дочернего элемента

Question

Попытка найти селектор CSS для этого, но не может быть успешным.

мне нужно Промежуток, который имеет класс rtIn Где его Родитель 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 у ваш HTML код:

Вы были:

span class="rtIn"></span> 

и должно быть:

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

Google Chrome становится стиль CSS:

Answer 2

здесь Actual Selector Для этого

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

JSFiddl е: http://jsfiddle.net/blackcrown/w4fpc8Le/3/

этот ответ может быть импровизированным, если Спан находится на 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/