如何选择dom中太深的所有子元素

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>

在上面的代码中，我需要在select标签上应用 css。但我找不到办法做到这一点。在我的服务器上，该文档是动态生成的，因此我无法控制它使用哪些标签。唯一的硬编码div是最外面的 div : <div id="obselect">。有没有办法通过使用类似以下内容来将样式应用于select其中的所有标签：div

#obselect > select
{
   // CSS
}

Answer 1

这样做的方法是使用：

#obselect select
{
   // CSS
}

不是：

#obselect > select
{
   // CSS
}

这是因为第二个目标是选择元素的直接子元素，而不是全部

Answer 2

如果你使用

div#obselect select {
    ...
}

那么给定的样式将应用于select任何divid 为“ obselect ”的所有元素，无论它出现在 DOM 中的深度。

（请注意，选择器>专门用于仅选择直接子级。）