前端学习笔记：CSS3选择器的继承、优先级和重要性

一、样式的继承

1、什么叫“继承”？
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

但注意有一些css样式是不具有继承性的。如border:1px solid red;

二、选择器的优先级

**结论：**选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
exp:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css3选择器优先级</title><style type="text/css">/*ID选择器*/#box{color:blue;}  /*类选择器*/.dv{color:orange;}/*标签选择器*/div{color:black;}/*通配符选择器*/*{color:green;}</style>
</head><body><div style="color:red" id="box" class="dv">我是一个div，选择器的优先级</div>
</body></html>

页面显示结果：

三、权值计算

权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
（权值越高，优先级越高）
exp:

p{color:red;}    /*权值为1*/
p span{color:green;}     /*权值为1+1=2*/
.warning{color:white;}      /*权值为10*/
p span.warning{color:purple;}     /*权值为1+1+10=12*/
#footer .note p{color:yellow;}      /*权值为100+10+1=111*/

四、权值最高设置——!important

exp:
注意：!important要写在分号的前面

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

页面显示：

样式优先级：
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important优先级

前端学习笔记：CSS3选择器的继承、优先级和重要性相关推荐

前端学习笔记—CSS3
视频地址:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程 CSS基础认识基础认识中文名称: CSS:层叠样式表(Cascading style sheets) 作用 ...
前端学习笔记-jQuery-jQuery选择器/隐式迭代/链式编程
jQuery选择器 jQuery基本选择器原生JS获取原生的方式很多,很杂,而且兼容性情况,不一致,因此jQuery给我们做了封装,使获取元素统一标准. $("选择器") // ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
【慕课网】Web学习笔记———CSS3 （一）
[Web学习笔记]CSS3 (一) CSS3代码语法 CSS注释代码 CSS样式内联式css样式嵌入式css样式外部式css样式权值 CSS3选择器标签选择器类选择器 ID选择器类与ID ...
前端学习2——CSS3
前端学习2--CSS3 0.css注释 /* 这是一条注释 */ 1.样式优先级行内样式>内部样式>外部样式 1.1.行内样式 <p style="font-size:1 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
JavaScript学习笔记之对象及继承
JavaScript学习笔记之对象及继承对象属性 ES5中有两种属性,数据属性和访问器属性. 数据属性包括[[writable]](能否修改属性的值).[[value]]等等: 访问器属性包括[[C ...
C# 学习笔记（5）继承
C# 学习笔记(5) 继承我们可能会在一些类中,写一些重复的成员,继承就是为了避免重复写这些成员,将这些成员单独的封装到一个类中,作为这些类的父类.一个类在需要这些重复的成员时,直接继承父类,这些 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
Windows进程与线程学习笔记（九）—— 线程优先级/进程挂靠/跨进程读写
Windows进程与线程学习笔记(九)-- 线程优先级/进程挂靠/跨进程读写要点回顾线程优先级调度链表分析 KiFindReadyThread 分析 KiSwapThread 总结进程挂靠 ...