CSS优先级

最新推荐文章于 2024-09-28 13:56:49 发布

转载最新推荐文章于 2024-09-28 13:56:49 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/abely/blog/686844

为什么80%的码农都做不了架构师？>>>

在网页设计中我们经常需要用CSS选择器选中元素并添加样式，但如果两个选择器选中同一个元素，到底哪个样式生效呢？曾经我以为后面的会覆盖前面的，但是事实并非如此简单。

css的优先级是用四个数字表示的（a,b,c,d），数字的大小就代表优先级的大小，a,b,c,d分别对应如下几条规则。

style样式，很少在标签内加入style属性，所以一般为0，如果有则为1
css选择器中包含id数量的总和
其他css选择器的总和
标签和伪元素和伪类和总和

如果两个css选择器具有相同的优先级，则在样式表中后面的那个起作用。通配符的优先级为0。

例如

#leftbar li:first-child 的优先级为 0,1,0,2

h2.title 的优先级为0,0,1,1

简单解释，我们可以看如下几个例子：

a>b（1000>0100）（style>id所以红色）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #id3{
            color:yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3" style="color: red">red</div>
    </div>
</div>
</body>
</html>

b>c (0100>0040) [id="id3"]属于属性选择器，不能包含在id选择器中，再加行三个类选择，共计4个。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #id3{
            color: red;;
        }
        .class1>.class2>.class3[id="id3"]{
            color:yellow;
        }


    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

b>b(0030>0010)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .class1>.class2>.class3{
            color:red;
        }
        .class3{
            color: yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

c>d(0020>0012)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .class2>.class3{
           color:red;
       }
        div .class2:first-child{
            color: yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

现在大家应该对CSS优先级规则有了最直观认识，但是上面并不包括!important,!important是用来强制覆盖样式的，并不关心优先级，被!important覆盖的元素默认有最高优先级，但有一个元素被两个!important覆盖，则还是按照CSS优先级确定规则。

for example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .class2>.class3[id="id3"]{
           color:red ;
       }
        div .class2>.class3{
            color: yellow !important;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">yellow</div>
    </div>
</div>
</body>
</html>

值得一提的是使用!important时注意伪类。

研究这个时，顺便看了一下伪类和伪元素的区别：

CSS伪类用于向某些选择器添加特殊效果

CSS伪元素用于将特殊的效果添加到某些选择器

例如：

:hover 当鼠标悬停元素上方时，向元素添加样式

:before 在某元素之前插入某些内容

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上CSS3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。:before-->::before

本文参考如下链接，如想更一步了解，自行阅读

CSS伪类和伪元素的区别：https://segmentfault.com/a/1190000000484493

转载于:https://my.oschina.net/abely/blog/686844