面试题：CSS语法中选择器优先级的计算规则是什么

优先级计算规则

内联样式：直接写在HTML元素的style属性中的样式，优先级最高，权值为1000。例如：<p style="color: red;">这是一段红色文字</p>。
ID选择器：使用#号加上ID名称，权值为100。例如：#myId { color: blue; }。
类选择器、属性选择器、伪类选择器：类选择器使用.号加上类名，属性选择器如[type="text"]，伪类选择器如:hover，它们的权值都为10。例如：.myClass { font-size: 16px; }，input[type="text"] { border: 1px solid black; }，a:hover { text-decoration: underline; }。
标签选择器、伪元素选择器：直接使用HTML标签名，伪元素选择器如::before，权值为1。例如：p { line-height: 1.5; }，p::before { content: "前缀"; }。
通配符选择器：*，权值为0。例如：* { margin: 0; padding: 0; }

当多个选择器同时作用于一个元素时，将各个选择器的权值相加，权值高的样式优先应用。如果权值相同，则按照样式表中出现的顺序，后出现的样式覆盖先出现的样式。

示例

假设有以下HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 标签选择器，权值1 */
        p {
            color: green;
        }
        /* 类选择器，权值10 */
      .myClass {
            color: yellow;
        }
        /* ID选择器，权值100 */
        #myId {
            color: purple;
        }
        /* 内联样式，权值1000 */
    </style>
</head>
<body>
    <p id="myId" class="myClass">这段文字的颜色是什么？</p>
</body>
</html>

在这个例子中，p标签同时匹配了标签选择器、类选择器和ID选择器。计算权值：

标签选择器权值为1。
类选择器权值为10。
ID选择器权值为100。

由于ID选择器权值最高，所以最终这段文字的颜色会是purple（紫色）。如果没有ID选择器，类选择器权值高于标签选择器，文字颜色会是yellow（黄色）。如果只有标签选择器，文字颜色会是green（绿色）。

面试题：CSS语法中选择器优先级的计算规则是什么

知识考点

面试题答案

优先级计算规则

示例