原文地址：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. 使用VM虚拟机安装Linux系统详细流程

    最近新换了个电脑,所以需要重新安装虚拟机和Linux系统,话不多说,看流程吧 1.安装vm,这个就不说了,打开VM 2.点击安装虚拟机 3.选择自定义安装 4.选择稍后安装 5.选择要安装的系统 6. ...

  2. [Flink]Flink1.6三种运行模式安装部署以及实现WordCount

    前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现wordcount 环境 版本:Flink 1.6.2 集群环境:Hadoop2 ...

  3. [考试反思]0921csp-s模拟测试49：困顿

    太弱.还是太弱. 拉不开分差,离第一机房分数线估计还是300多分. 但是,还是要骂:XX出题人. 部分分非常少且没有意义,T1基本只有0/纯暴力20/100三个档, T2正解是n2但是n3一分不给,还 ...

  4. 「刷题」Color 群论

    这道题乍一看挺水的,直接$ Ploya $就可以了,可是再看看数据范围:n<=1e9 那就是有1e9种置换,这不歇比了. 于是考虑式子的优化. 首先证明,转i次的置换的每个循环结大小是 $ gc ...

  5. Java编程思想笔记——赋值

    赋值使用操作符“=”.它的意思是“取右边的值(即右值),把它复制给左边(即左值)”.右值可以是任何常数.变量或者表达式(只要它能生成一个值就行).但左值必须是一个明确的.已命名的变量.也就是说,必须有 ...

  6. 大数据之路day02_1--运算符

    运算符这一节主要是介绍算数运算符.赋值运算符.比较运算符.逻辑运算符.三元运算符.接下来一一介绍. 1.算数运算符 ++ 和 -- 的用法 例如:a++ 和 ++a的区别 %的应用场景(取模其实就是取 ...

  7. 底半部之工作队列和tasklet，内核定时器。

    1.软中断机制  不能以模块形式出现   使用起来不够灵活2.tasklet  核心数据结构       struct tasklet_struct      {          function  ...

  8. mpvue+小程序云开发，纯前端实现婚礼邀请函

    请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框 ...

  9. LyX Error convert to loadable format - error handling

    This question used to spend my half a day, and this time again, half a day. Here I write it down in ...

  10. pat 1136 A Delayed Palindrome（20 分）

    1136 A Delayed Palindrome(20 分) Consider a positive integer N written in standard notation with k+1 ...