CSS-样式权重精华6题-前端面试题

最新推荐文章于 2023-07-12 20:47:44 发布

乌药ice

最新推荐文章于 2023-07-12 20:47:44 发布

阅读量426

点赞数

分类专栏：从入坑到入坟文章标签： html css css3 html5

本文内容如有侵权，请及时内信我删除。博客内容仅供学习参考，不可用于其他用途。转载请注明本文作者：乌药ice

本文链接：https://blog.csdn.net/qq_41138935/article/details/112424364

版权

从入坑到入坟专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第一题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
    #father #son{   /*1*/
        color: blue;
    }
    #father p.c2{   /*2*/
        color: black;
    }
    div.c1 p.c2{    /*3*/
        color: red;
    }
    #father{        /*4*/
        color: green !important;
    }
</style>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2" >
            试问这行字体是什么颜色的？
        </p>
    </div>
</body>
</html>

问题：
p标签中的文字是什么颜色？
解析：
首先，排除第4，虽然 !important拥有最高权重，但是p标签继承权重为0。
根据ID选择器>类选择器>标签选择器，排除第2和第3。
答案：
blue

第二题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
    #father{        /*1*/
        color: red;
    }
    p{              /*2*/
        color: blue;
    }
</style>
<body>
    <div id="father">
        <p>
            试问这行字体是什么颜色的？
        </p>
    </div>
</body>
</html>

问题：
p标签中的文字是什么颜色？
解析：
p标签继承权重为0
答案：
blue

第三题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
    div p{          /*1*/
        color: red;
    }
    #father{        /*2*/
        color: red;
    }
    p.c2{           /*3*/
        color: blue;
    }
</style>
<body>
    <div id="father">
        <p class="c2">
            试问这行字体是什么颜色的？
        </p>
    </div>
</body>
</html>

问题：
p标签中的文字是什么颜色？
解析：
继承权重为0，排除第二。
类选择器>标签选择器，排除第1。
答案：
blue

第四题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
    <style type="text/css">
        div div{    /*1*/
            color: blue;
        }
        div{        /*2*/
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                试问这行字体是什么颜色的？
            </div>
        </div>
    </div>
</body>
</html>

问题：
div标签中的文字是什么颜色？
解析：
通过计算选择符中标签选择器和伪元素选择器的个数之和，得到：
第1为个数之和为2，第2个数之和为1。
最后，比较个数大小。

计算规则：

计算选择符中 ID 选择器的个数（a），
计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），
计算选择符中标签选择器和伪元素选择器的个数之和（c）。
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

答案：
blue

第五题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
    <style type="text/css">
        div div div div div div{    /*1*/
            color: red;
        }
        .me{                        /*2*/
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div class="me">
                            试问这行字体是什么颜色的？
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

问题：
div标签中的文字是什么颜色？
解析：
类选择器>标签选择器，排除第1。
答案：
blue

第六题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-样式权重精华6题</title>
    <style type="text/css">
        .c1 .c2 div{    /*1*/
            color: blue;
        }
        div #box3{      /*2*/
            color: green;
        }
        #box1 div{      /*3*/
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                试问这行字体是什么颜色的？
            </div>
        </div>
    </div>
</body>
</html>