CSS 属性选择器实战示例

对于含有 colspan 属性的元素，如何选中属性值等于 1 的元素和不等于 1 的元素

在 CSS 里可以用属性选择器一次性解决：

css

Copy

/* 1. 选中 colspan 恰好等于 1 的元素 */
[colspan="1"] {
  background: lightgreen;
}

/* 2. 选中 colspan 存在且不等于 1 的元素 */
[colspan]:not([colspan="1"]) {
  background: lightcoral;
}

解释

[colspan="1"] —— 完全匹配值 1。
[colspan]:not([colspan="1"]) —— 先保证元素有 colspan 属性，再排除值为 1 的情况，于是剩下的就是所有“不等于 1” 的情况（2、3、…或任意值）。