如何为带动态aria-describedby的复选框添加红色边框

你可以利用CSS的属性开头匹配选择器（^=）来搞定这个需求，因为你的aria-describedby属性值始终是以Tooltip开头的，后面的动态数字不影响匹配。

直接写这样的CSS代码就能实现：

input[type="checkbox"][aria-describedby^="Tooltip"] {
  border: 2px solid red;
}

代码解释： #

• input[type="checkbox"]：精准选中页面上的复选框元素
• [aria-describedby^="Tooltip"]：这是属性选择器的一种，^=表示“属性值以指定字符串开头”，不管后面跟着什么数字，只要aria-describedby的值是以Tooltip开头，就会匹配到该元素并应用红色边框样式。

额外优化建议： #

如果页面上还有其他元素也带有以Tooltip开头的aria-describedby属性，为了避免误匹配，可以给目标复选框加上父元素限制或者专属类名，缩小选择范围：

/* 假设复选框在class为form-item的容器里 */
.form-item input[type="checkbox"][aria-describedby^="Tooltip"] {
  border: 2px solid red;
}

内容的提问来源于stack exchange，提问作者Mahi