如何单独使用CSS根据标签的文本值定位标签

ehxuflar  于 2023-02-14  发布在  其他
关注(0)|答案(2)|浏览(210)

在此复选框标签中,我需要将“用户在年级/s”重命名为“学生在年级/s”。理想情况下,我会使用id=“audience-select-users”,但是,在网站上有其他相同的使用此ID,我不想重命名。我只能编写自定义CSS。
是否有一种方法可以根据标签中包含的文本“年级别的用户”来选择标签?

<fieldset class="checklist border-none" style="">
  <ul class="option-list">
    <li>
      <input type="checkbox" id="audience-select-users">
      <label for="audience-select-users">
      Users in year level/s
      </label>
    </li>
  </ul>
</fieldset>

唯一的其他独特的项目是文本下这一a如果有任何办法利用这一点?

谢谢

92vpleto

92vpleto1#

在我看来,您对此问题的解决方案并不是最佳实践,因为标签文本在开发过程中可能会更改多次,而文本的微小更改将破坏选择。
我建议您为这个标签指定一个类似类的标识符,以便能够选择它。

<label for="audience-select-users" class="changeable">
      Users in year level/s
</label>
label[for="audience-select-users"].changeable{
  /* your style */
}
q3aa0525

q3aa05252#

理想情况下,这不是最佳实践,但如果您没有任何其他选择,您可以尝试以下操作:

label[for="audience-select-users"] {
   position:relative; font-size:0px;
}
label[for="audience-select-users"]:after{
  Content:'Students in year level/s';
  position:absolute;
  font-size:15px;
  width:150px;
  
}
<fieldset class="checklist border-none" style="">
  <ul class="option-list">
    <li>
      <input type="checkbox" id="audience-select-users">
      <label for="audience-select-users">
      Users in year level/s
      </label>
    </li>
  </ul>
</fieldset>

示例2-〉您可以使用唯一的输入ID来定位标签。

#audience-select-users + label[for="audience-select-users"]

一个三个三个一个

相关问题