CSS中ID选择器优先级最高为何两个p元素背景色一致？

1. 你写的选择器根本没命中目标元素 #

你试的p #123 {}和#123 p {}都是后代选择器，不是针对带ID的p元素的：

• p #123 {}：找的是p标签内部ID为123的元素，不是那个ID为123的p本身
• #123 p {}：找的是ID为123的元素内部的p标签，同样不是你要改的那两个p

要选中ID为test1/test2的p，正确写法是#test1 {}（直接用ID）或者p#test1 {}（标签+ID，更精准）。

2. 纯数字ID会导致选择器失效 #

如果你的ID是#123这种纯数字开头的，CSS语法里不允许ID选择器以数字开头——浏览器会直接忽略这条样式规则，自然不会覆盖全局的蓝色背景。

ID选择器优先级确实最高，但这是建立在选择器能正确匹配到目标元素的基础上。如果选择器写法错了、命名不合法，浏览器根本不认这条规则，只会走其他能匹配的样式（比如你写的全局p样式）。

优先级计算的基本规则：

• ID选择器（权重100）> 类/伪类/属性选择器（权重10）> 标签/伪元素选择器（权重1）
• 同权重下，后写的样式会覆盖先写的

假设你的HTML是这样：

<p id="test1">测试1</p>
<p id="test2">测试2</p>

对应的正确CSS：

/* 直接用ID，优先级最高 */
#test1 {
  background: red;
}
#test2 {
  background: green;
}

/* 或者结合标签，效果一样，只是更明确是针对p标签的ID */
p#test1 {
  background: red;
}

另外记好ID命名规则：

• 必须以字母、下划线（_）或短横线（-）开头
• 后面可以加数字、字母、下划线、短横线、冒号、点号

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