CSS选择器优先级-526互联

CSS中有哪些常用的选择器?

ID选择器类选择器元素选择器

如果同时使用的话哪个优先级更高?

内联样式 > ID选择器 > 类选择器 > 元素选择器

代码举例,比如下面这段代码,同时使用了类选择器和标签(元素)选择器,但是h1标签中内容的颜色是绿色,因为类选择器优先级要高于元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fruit {
            color: green;
        }
        
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="fruit">芒果</h1>
    <h1 class="fruit">苹果</h1>
</body>

</html>