如何编写选择器匹配带双引号包裹的自定义属性值

首先得明确一个关键点：纯CSS做不到这个需求。因为浏览器在解析HTML的时候，会自动忽略属性值的引号（不管是双引号、单引号还是没引号），把属性值统一存储为不带引号的字符串。也就是说，<p myProperty=12345>和<p myProperty="12345">在DOM里的myProperty属性值完全一样，CSS选择器没办法区分它们的原始书写形式。

那要实现这个需求，只能借助JavaScript来检查元素的原始HTML代码，判断属性值是否是双引号包裹的形式。下面是具体的实现步骤：

步骤1：用JS筛选符合条件的元素 #

通过querySelectorAll获取所有带有myProperty属性的元素，然后遍历每个元素，用正则表达式检查它的原始HTML中属性是否是双引号包裹的格式：

// 获取所有包含myProperty属性的元素
const targetElements = document.querySelectorAll('[myProperty]');

targetElements.forEach(el => {
  // 获取元素的完整HTML字符串
  const elementHTML = el.outerHTML;
  // 正则匹配：检查myProperty属性是否以双引号包裹值
  // 这个正则会匹配类似 myProperty="xxx" 的格式
  const isQuoted = /myProperty="[^"]+"/.test(elementHTML);
  
  if (isQuoted) {
    // 给符合条件的元素添加一个自定义类，方便后续用CSS样式
    el.classList.add('myproperty-quoted');
  }
});

步骤2：用CSS给匹配到的元素设置样式 #

现在你可以通过刚才添加的类来给这些元素设置样式了：

.myproperty-quoted {
  background-color: #f0f9ff;
  border-left: 4px solid #3b82f6;
  padding: 8px;
}

注意事项 #

• 这个方法依赖于元素的outerHTML，如果元素是通过JS动态创建或修改的，outerHTML可能和原始HTML不一致，这种情况下可能需要调整逻辑。
• 如果你的属性值里包含转义的双引号（比如myProperty="he said \"hello\""），需要修改正则表达式来适配这种场景，比如把正则改成/myProperty="(?:\\.|[^"])+"/。

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