如何选择具有类的所有元素，除了具有与模式匹配的id的祖先的元素？

Question

我有一个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) { }

我做错了什么？这甚至可能吗？

Answer 1

我会添加一个针对所有.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>

另一种选择可能是使用它

div.ps_box-label:not(#win5divG4FORM_WRK_G4FORM_IDlbl) + .ps_box-value{
  color:green;
}

<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>