原文地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
css的MDN中文版，这一页是讲css的优先级的。
读到文章的最后，末尾部分，翻译貌似是罢工了，而且显示结果也出错了。

英文原版是这样的：

所以，我就来冒昧的翻译一下吧。
——————————–start—————————————————

选择器直接定位到元素的样式与元素继承的css样式进行优先级对比

如果通过css选择器直接定位到元素，那么在这个选择器中声明的样式就比元素继承（自祖先元素）的样式具有更高的优先级。而不管这个继承的样式本身是通过什么方式或者什么优先级的规则定义的。

#parent {

  color: green;

}

h1 {

  color: purple;

}

当它应用在以下html上的时候

<html>

<body id="parent">

  <h1>Here is a title!</h1>

</body>

</html>

浏览器会将它渲染成：

———————————-end———————————————————-

css优先级 中文版MDN补充翻译的更多相关文章

  1. css优先级机制说明

    原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...

  2. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  3. CSS优先级的两种理解方式

    方式一:值相加 我们先去MDN看看官方的解释: 优先级是如何计算的? 优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定. 而当优先级与多个 CSS ...

  4. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  5. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  6. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  7. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  8. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  9. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

  1. LNMP下zabbix_server安装部署二

    上一篇中搭建完成了zabbix的web端,但是虚拟机有点问题,所以转到笔记本上来写笔记本环境 server:192.168.112.9 agent:192.168.112.8 ​ 上一篇中完成了web ...

  2. [考试反思]1031csp-s模拟测试96：常态

    按照smily的说法这一场的大众分暴力分是不是265啊QwQ那我可真是个大垃圾 总算还是回归了常态. T3文件名写错,把“city.in”写成“city,in” 还好,只丢了20分. T2乱打$O(n ...

  3. PHP 精典面试题（附答案）

    1.输出Mozilla/4.0(compatible;MISIE5.01;Window NT 5.0)是,可能输出的语句是? A:$_SERVER['HTTP_USER_AGENT_TYPE']; B ...

  4. Python 命令行之旅：深入 click 之参数篇

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  5. m74 考试反思

    这次不叫考试题解,叫做考试反思,为什么折磨说,因为这次犯的错误太多了! 事情还要从昨天晚上说起,昨晚放学,班主任来机房说我被子不合格,要停课反思 ###&&￥%#%￥@#%￥#@……% ...

  6. python习题——随机整数生成类

    随机整数生成类 可以先设定一批生成数字的个数,可设定指定生成的数值的范围 1.普通类实现 import random import random class RandomGen: def __init ...

  7. day8-函数

    ---def test(x): # def:定义函数的关键字,test:函数名, x相当于以前函数中的自变量使用函数的好处:1.代码重用2.保持一致性,易于维护3.可扩展性 def test(x): ...

  8. 009.Kubernetes二进制部署kube-apiserver

    一 部署master节点 1.1 master节点服务 kubernetes master 节点运行如下组件: kube-apiserver kube-scheduler kube-controlle ...

  9. 高性能Web动画和渲染原理系列（5）合成层的生成条件和陷阱

    目录 一. 硬件加速相关的几个概念 二. 合成层的生成条件 显式提升 隐式提升 三. 硬件加速的权衡 四. 动画实现的一些建议 示例代码托管在:http://www.github.com/dashno ...

  10. 从最近面试聊聊我所感受的.net天花板

    #0 前言 入职新公司没多久,闲来无事在博客园闲逛,看到园友分享的面试经历,正好自己这段时间面试找工作,也挺多感想的,干脆趁这个机会总结整理一下.博主13年开始实习,14年毕业.到现在也工作五六年了. ...