css - 如何选择所有在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 {
    ...
}

然后给定的样式将应用于ID 为“ obselectselect ”的 any内部的所有元素，无论它在 DOM 中出现多深。div

（请注意，选择器>特别适用于仅选择直接子级。）

Answer 3

您可以省略>选择器，因为这意味着您只希望它应用于直系后代：

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