原文地址: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. 用selenium实现打码平台

    注:本文以  人人网登陆 为例 import time from selenium import webdriver # 准备一个名为yudama的py文件 from yudama import in ...

  2. 物理CPU数、CPU核心数、进程数

    参考CSDN博客:https://blog.csdn.net/helloworld0906/article/details/90547159 一. 物理cpu数.cpu核数.线程数(逻辑cpu数)的关 ...

  3. git下载安装

    git是目前最流行的分布式版本控制系统,使用它可以很方便的对项目进行管理备份. 1.git下载 登录git官网https://git-scm.com/,点击downloads即可下载安装包 安装包如下 ...

  4. Project Euler 58: Spiral primes

    从一开始按以下方式逆时针旋转,可以形成一个边长为七的正方形螺旋: 一个有趣的现象是右下对角线上都有一个奇完全平方数,但是更有趣的是两条对角线上的十三个数中有八个数是素数(已经标红),也就是说素数占比为 ...

  5. 常用样式积累-scss

    /** * author ctj -- 自定义公用样式 */ /*清除浮动*/ .clearfix:after { height:; content: ''; display: block; clea ...

  6. Geotools求shapefile路网中任意两点之间最短路径的距离

    前言:之前在博问求助过这个问题.经过几天的思考,算是解决了(但仍有不足),另一方面对Geotools不是很熟,有些描述可能不正确,希望大家批评指正. 问题:作为一个新手,我并没有发现Geotools中 ...

  7. 201871010114-李岩松《面向对象程序设计(java)》第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. Maven系列第6篇:生命周期和插件详解,此篇看过之后在maven的理解上可以超越同级别90%的人!

    maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第6篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...

  9. 使用Jquery获取指定属性的值

    使用Jquery获取指定属性的值 <input type="hidden" value="{$time}" name="time" i ...

  10. 遗忘root密码,应该如何修改?[CentOS7.5]

    https://www.lanzous.com/i71hw6d 下载视频演示 实验环境:VMware Workstation [CentOS7.5]遗忘root用户密码 应该如何修改??? 设置BIO ...