网络技术问题 - CSS 测验 - 第一组 - 问题 14

问题描述

在 CSS 中，选择器的优先级（Specificity）被定义为一个四元组（a,b,c,d），其中 a、b、c 、d 分别代表不同选择器的各种组成部分的数量，用于判断样式的优先级。请写出以下四个选择器的优先级（Specificity）（从左到右）：

#example p { color: red; }
div p span { color : blue; }
p  { color : green; }
.example { color : yellow; }

解答

通过分析上述四个选择器的组成部分，可得到它们的 Specificity 如下：

• #example p：(1,0,1,0)
• div p span：(0,1,1,1)
• p：(0,0,1,0)
• .example：(0,1,0,0)

因此，它们的优先级（从左到右）分别为：

1. #example p { color: red; }
2. div p span { color: blue; }
3. p { color : green; }
4. .example { color : yellow; }

这里需要注意，虽然 .example 的优先级低于 #example p，但如果它们都是应用在相同的元素上，则后者会覆盖前者的样式。这是因为在 Specificity 相同时，后定义的样式会覆盖先定义的样式。因此，在实际应用中，需要根据具体情况来确定选择器的 Specificity。