css面试题

117 阅读1分钟

谈谈你对CSS选择器优先级的理解

常用选择器

idclass、标签、伪类、通配

选择器的优先级的计算方式

优先级:

important! > 行间样式 > id > class > 标签 > 通配
    (注意:继承的优先级永远没有直接给的优先级高)

计算方式:

   组合起来的用ABCD式方法计算
       行间 id class 标签
        A   B    C    D
        0   1    1    0  #div1 .span1
        0   0    3    0  .div1 .p1 .span1 
  综上所述#div1 .span1 = 110 则 .div1 .p1 .span1 = 30 ,
  110>30 所以 #div1 .span1会被显示出来,而.div1 .p1 .span1不会被显示出来。

伪类 = class

代码演示

<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目部王广为</title>
</head>
<style>
    * {
        color: red;
    }
</style>

<body>
    <div id="div1" class="div1">
        <p id="p1" class="p1">
            <span id="span1" class="span1">项目部王广为</span>
        </p>
    </div>
</body>

</html>

总结

该题目如何回答?

1、常用的CSS选择器

2、讲清楚选择器优先级的计算方式