Как выбрать все дочерние элементы, которые слишком глубоко в йот

Question

У меня есть HTML документ, как это:

<div id="obselect"> 
     <div id="objects"> 
      <span id="j_id0:j_id2:userPanel"> 
        <table> 
         <tbody><tr> 
          <th class="subheading" width="40%">Available Objects</th> 
          <th class="subheading" width="20%">&nbsp;</th> 
          <th class="subheading" width="40%">Selected Objects</th> 
          </tr> 
          <tr> 
           <td><span id="j_id0:j_id2:snondrag"> 
               <select name="j_id0:j_id2:j_id18" multiple="multiple" size="5">        <option value="001">Account</option> 
                <option value="002">Note</option> 
                <option value="a0j">Text Ad</option> 
              </select> 
            </span></td> 

          </tr> 
         </tbody> 
        </table> 
     </span> 
      </div> 
</div> 

В коде выше мне нужно применить CSS на select тега. Но я не могу найти способ этого. На моем сервере этот документ динамически генерируется, поэтому я не контролирую, какие теги он использует. Единственный hardcoded div является наружным большинством div: <div id="obselect">. Есть ли способ применить стиль на всех select тегов внутри этой div используя что-то вроде:

#obselect > select 
{ 
    // CSS 
} 

Answer 1

Если вы используете

div#obselect select { 
    ... 
} 

то данный стиль применяется ко всем элементам select внутри любой div с идентификатором 'obselect', , не учитывая, насколько глубоко это происходит в DOM.

(Обратите внимание, что селектор > специально предназначена для выбора только прямых потомков.)

Answer 2

способ сделать это использование:

#obselect select 
{ 
    // CSS 
} 

нет:

#obselect > select 
{ 
    // CSS 
} 

Это связано с тем, что вторая нацелена на прямых детей элемента с выбором не всех из них

Answer 3

Вы можете оставить селектор >, как это означает, что вы только хотите, чтобы оно применялось к прямым потомкам:

#obselect select 
{ 
    // Targets all select elements under #obselect 
}