CSS之选择器的优先级问题

最新推荐文章于 2022-07-20 21:52:22 发布

极客研究者

最新推荐文章于 2022-07-20 21:52:22 发布

阅读量177

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105567971

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

样式的冲突:当多个选择器对同一元素进行样式的控制
发生样式的冲突时,选择哪个样式是由选择器的优先级决定的

选择器的优先级:内联样式>id选择器>class选择器和伪类选择器>元素选择器

内联样式:1000
id选择器:100
class选择器和伪类选择器:110
元素选择器:1

注意:在比较优先级时,会对所有选择器的优先级进行累加计算,优先级越高,则优先显示
选择器的累加不会超过最大数量级,类选择器的累加不会超过id选择器的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器的优先级问题</title>
    <style>
        p{
            color: turquoise;
        }

        .yamdClass{
            color: tomato;
        }

        div#div1{
            background-color: royalblue;
        }
        
        div{
            border: 1px solid red;
        }
        #div1{
            background-color:rosybrown;
        }

        /* 分组选择器优先级将分别计算,不会相加 */
        div,span,p{ 
            background-color: slateblue;
        }

    </style>
</head>
<body>
    <div id="div1">she is so sexy!</div>
    <p class="yamdClass">you are my destiny</p>
    <span>I want to be friendly!</span>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之选择器的优先级问题

样式的冲突:当多个选择器对同一元素进行样式的控制发生样式的冲突时,选择哪个样式是由选择器的优先级决定的选择器的优先级:内联样式>id选择器>class选择器和伪类选择器>元素选择器内联样式:1000id选择器:100class选择器和伪类选择器:110元素选择器:1注意:在比较优先级时,会对所有选择器的优先级进行累加计算,优先级越高,则优先显示选择器的累加不会超过...
复制链接

扫一扫