爱学习的前端人

正确的答案：文字应该是蓝色。

成都创新互联专注于广南企业网站建设,响应式网站,商城网站建设。广南网站建设公司,为广南等地区提供建站服务。全流程定制网站开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

这是一道关于 css 选择器权重相关的面试题，今天就来学习学习 css 选择器权重如何计算?

css 选择器权重

如果两组选择器都定位到同一元素，且对同一属性设置不同的样式，此时到底使用的是哪个样式，就需要通过选择器权重来决定到底使用的是哪个样式?

具体的样式继承顺序应该为：

选中且设置 !important 的 > 权重高的 > 权重相同位置靠后的 > 来自继承的。

一个选择器的优先级可以由四部分计算得分：

• 千位：如果声明在 style 的属性里，则该部分得一分。
• 百位：选择器包含 id 选择器，则该位得一分。
• 十位：选择器包含类、属性选择器和伪类，则该位得一分。
• 个位：选择器包含标签、伪元素选择器，则该位得一分。

举例：

#header p.content.active
/*
选择器权重计算过程：
千位：0 。样式没有定义在 style 中 ，所以千位为 0
百位：1。有一个 id 选择器。
十位：2。有两个类选择器。
个位：1。包含一个标签。
最终权重值为：0121
*/

实例1：p 标签内的文字应该是什么颜色?

爱学习的前端人

正确答案：红色。

解析：上述只有 p 标签选中到对应 p 元素了，body 它是属于 p 的父级元素，所以是属于继承的，来自继承的权重是最低的，所以文字是红色。

实例2：a 标签文字会继承父级样式还是会使用浏览器默认颜色?

前端人

正确答案：蓝色。

解析：虽然 a 标签没有设置样式，但是浏览器会有内置的默认颜色，使用调试工具可以看到：

按照权重规则来计算：

a:-webkit-any-link -> 0011
body                       -> 0001

所以浏览器会优先使用内置默认的文字颜色。

实例3：40% 都做错的面试题。

 
爱学习的前端人

正确答案：蓝色。

解析：

.box h1#title
/*
选择器权重计算过程：
千位：0 。样式没有定义在 style 中 ，所以千位为 0
百位：1。有一个 id 选择器。
十位：1。有 1 个类选择器。
个位：1。包含一个标签。
最终权重值为：0111
*/
#box h1.title
/*
选择器权重计算过程：
千位：0 。样式没有定义在 style 中 ，所以千位为 0
百位：1。有一个 id 选择器。
十位：1。有 1 个类选择器。
个位：1。包含一个标签。
最终权重值为：0111
*/

上述两个选择器的权重都是 0111。

css 选择器权重相同的时候，继承靠后面的样式。所以 h1 标签会继承后面的样式是蓝色。

上面这三个实例题都是非常典型的例子，可以对应着实例，好好理解上边的 css 权重介绍，内容总结性比较强。

分享题目：百分之四十的人都做错的一道 CSS 面试题
网站网址：http://www.shufengxianlan.com/qtweb/news42/116342.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联