如何选择具有类的所有元素，除了具有与模式匹配的id的祖先的元素？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何选择具有类的所有元素，除了具有与模式匹配的id的祖先的元素？相关的知识，希望对你有一定的参考价值。
我有一个html文档，其中包含许多具有样式类.ps-label的元素。除了一个元素，我需要将一个样式应用于所有这些样式。该元素位于div中，如下所示：
<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">
<div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>
</div>
div中有两个id会发生变化。他们是#win5divG3FORM_WRK_G3FORM_ID和#win5divG3FORM_WRK_G3FORM_IDlbl。根据几个不同的条件，数字会有所不同。因此，如果我想使用这个id，我必须进行模式匹配。
我怎样才能选择.ps-label类的所有元素，除了div里面的元素？
我尝试了以下选择器，但它不太正确。
.ps-label:not([id$="divG3FORM_WRK_G3FORM_ID"]) { }
它不起作用，因为它没有引用具有标签的跨度。它指的是父母。如何排除具有该特定ID的div的子项？
我已经尝试使用子选择器>来获取具有该id的div的后代，但我的语法必定是错误的，因为Chrome不接受它作为有效的选择器：
.ps-label:not([id$="divG3FORM_WRK_G3FORM_ID"] > div > span) { }
我做错了什么？这甚至可能吗？
答案
我会添加一个针对所有.ps-label的规则，然后添加另一个针对您的例外的规则
.ps-label{
color:red;
}
/* exception rule*/
#win5divG4FORM_WRK_G4FORM_IDlbl .ps-label {color:blue;}<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">
<div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>
<div class="ps_box-label" id="win5divG4FORM_WRK_G4FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G4FORM_WRK_G4FORM_ID">416</span>
<div class="ps_box-label" id="win5divG5FORM_WRK_G5FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G5FORM_WRK_G5FORM_ID">417</span>
</div>以上是关于如何选择具有类的所有元素，除了具有与模式匹配的id的祖先的元素？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery hide（）所有具有特定类的元素，除了具有特定父元素的所有元素