如何用CSS或jQuery选择含冒号的属性（如kvg:radical）

问题出在kvg是XML命名空间前缀，普通CSS/jQuery选择器无法直接识别带命名空间的属性——浏览器会将这类属性拆分为「命名空间URI」和「本地属性名」，而非把kvg:radical当作单一属性名处理。以下是高效的解决方法：

CSS 解决方案 #

方法1：通配符命名空间选择器（简单通用） #

无需关注具体命名空间，直接匹配所有本地名为radical的属性元素：

[*|radical] {
  stroke: red !important;
  /* 可追加其他样式，比如 stroke-width: 2px */
}

方法2：声明命名空间后精准匹配 #

先在CSS开头声明KanjiVG的官方命名空间，再用前缀精准选择：

@namespace kvg url("http://kanjivg.tagaini.net");
[kvg|radical] {
  stroke: red;
}

确认SVG根元素的xmlns:kvg属性值与上述URI一致（KanjiVG默认就是这个地址）。

JavaScript / jQuery 解决方案 #

原生JS（高效推荐） #

直接利用原生querySelectorAll支持命名空间选择器的特性：

// 方式1：通配符匹配
const radicalElements = document.querySelectorAll('[*|radical]');
radicalElements.forEach(el => {
  el.style.stroke = 'red';
});

// 方式2：指定命名空间精准匹配
const radicalElements = document.querySelectorAll('[kvg\\:radical]');
radicalElements.forEach(el => el.style.stroke = 'red');

jQuery 解决方案 #

jQuery对命名空间属性支持有限，可通过两种方式处理：

1. 用filter结合命名空间属性检查：

$('svg g').filter(function() {
  // 传入KanjiVG的命名空间URI和本地属性名
  return this.getAttributeNS('http://kanjivg.tagaini.net', 'radical') !== null;
}).css('stroke', 'red');

2. 直接调用原生选择器转成jQuery对象：

$(document.querySelectorAll('[*|radical]')).css('stroke', 'red');

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