一、特殊性规则

选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为0,0,0,0。

1.    对于选择器中的每一个id,记0,1,0,0;

2.    对于选择器中的每一个类、伪类、属性,记0,0,1,0;

3.    对于选择器中的每一个元素、伪元素,记0,0,0,1;

4.    结合符与通配符对于选择器的特殊性没有任何贡献。

注意:

1.    0,0,1,0的特殊性比0,0,0,13的特殊性更高。

2.    通配符 * 的特殊性为0,0,0,0,它是有特殊性的;结合符(比如h1+p中的“+”)根本没有特殊性;继承而来的样式也没有特殊性。

请看如下代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
color:red;
} body {
color:cyan;
}
</style>
</head>
<body>
<p>What kind of color this para will be?</p>
</body>
</html>

页面显示如下:

此例中,<p>元素从<body>元素中继承了cyan颜色,然而继承来的规则根本没有特殊性,其优先级低于 * 的0特殊性,所以<p>元素采用了 * 的规则,颜色为red。

关于通配符 * :由于 * 适用于所有元素,而且有0特殊性,往往会在不经意间造成继承无法实现的情况,应该尽量避免使用 * 选择器。

3.    指定id属性的属性选择器与id选择器有本质区别,比如:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div[id="test"] p {
color:red;
} #test p {
color:cyan;
}
</style>
</head>
<body>
<div id="test">
<p>What kind of color this para will be?</p>
</div>
</body>
</html>

页面效果:

此例中,div[id="test"] p 的特殊性为0,0,1,2;而 #test p 的特殊性为0,1,0,1;#test p 这个选择器胜出,所以字体颜色为cyan。

4.    行内样式的特殊性最高,为1,0,0,0。

5.    标记为!important的声明被称为重要声明,它没有特殊性,不过要与非重要声明分开考虑。

具体而言:非重要声明分为一组,它们之间的冲突使用特殊性解决;重要声明分为一组,它们之间的冲突内部解决;重要声明总是比非重要声明优先。

二、继承

1.    继承没有任何特殊性,记住这一点往往能明白很多问题。

请看如下代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>What kind of color this <a href="#">link</a> will be?</p>
</body>
</html>

页面效果:

为什么设置了<p>元素的颜色为红色,<a>元素的颜色却是蓝色?

这并不是因为<a>元素不继承父元素的颜色(原谅我之前就是这么认为的),而是因为<a>元素继承了<p>元素的颜色,但是这个继承来的样式根本没有特殊性,然而浏览器默认样式中对<a>元素设置了样式,很明显浏览器默认样式的特殊性更高,于是<a>元素就按照浏览器默认样式显示。

2.    CSS中有一个关键字是所有属性共有的,inherit,它使一个属性的值与其父元素相同。

在大多数情况下,不必指定继承,因为大多数属性会自动继承;不过,自动继承的属性没有特殊性,很容易被其它样式覆盖;当需要显式地指定一个元素的样式与其父元素一致时,使用inherit会更方便。

三、层叠

层叠规则:

1.    按权重排序;读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。

2.    权重相同的情况下,按照特殊性排序,特殊性越高的胜出。

3.    特殊性相同的情况下,按照样式表中的顺序排序,后出现的胜出。

btw,正是因为这个规则,才会使用LoVe-HA的顺序声明链接样式(LoVe-HA 依次为 :link;  :visited;  :hover;  :active)。

关于 外部样式<内部样式<行内样式 的说明:

这种说法来源于上述第3条规则。一般而言,在html的<head>元素下,我们习惯将外部样式表的<link>标签放在内部样式<style>之前,这就导致了内部样式的顺序在外部样式的顺序之后,所以内部样式优先级高;但是如果将<style>标签与<link>标签调换位置,比如这样:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
color:red;
}
</style>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<p>What kind of color this para will be?</p>
</body>
</html>

此例中,外部样式表包含 P {color:cyan;} 这样一条规则,它的特殊性与内部样式表一样,都为0,0,0,1,但由于外部样式表在内部样式之后,所以外部样式胜出,页面显示如下:

所以,

外部样式<内部样式 这只是一种习惯上的说法,关键还是要看它们出现的顺序,顺序越靠后的优先级更高。

当然,行内样式总是最靠后的,所以它的优先级高于外部样式和内部样式,这是毋庸置疑的。

CSS 特殊性、继承与层叠的更多相关文章

  1. CSS系列:CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  2. css的继承和层叠

    标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...

  3. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  4. HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  5. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  6. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  7. 从零开始学习html(九)CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  8. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  9. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  10. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

随机推荐

  1. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  2. ROC曲线和PR曲线绘制【转】

    TPR=TP/P :真正率:判断对的正样本占所有正样本的比例.  Precision=TP/(TP+FP) :判断对的正样本占判断出来的所有正样本的比例 FPR=FP/N :负正率:判断错的负样本占所 ...

  3. java使用Cookie判断用户登录情况

    1.判断是否登录 public boolean isLogin() { Set<Cookie> cookies = this.browser.getCookies(); String JS ...

  4. SecureCRT8.1下载+注册机+破解教程

    [下载]下载SecureCRT + SecureFX 8.1 Bundle版本软件,官网下载较麻烦,因此在此提供百度云连接. 链接:http://pan.baidu.com/s/1hsIjtSK 密码 ...

  5. JS调用App方法及App调用JS方法

    做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...

  6. vs2017自动生成的#include“stdafx.h”详解及解决方案

    vs2017自动生成的#include“stdafx.h”详解及解决方案 问题描述: 在高版本的Visual Studio的默认设置中,会出现这么一个现象,在新建项目之后,项目会自动生成#includ ...

  7. Java EE之JSTL(上)

    1.JSP标签和JSTL简介 JSP标签看起来就像普通的HTML或者XML标签一样.一个JSP标签将执行某些操作. 为了引用JSP标签必须使用正确的XML命名空间. <%@ taglib pre ...

  8. bzoj 1539: [POI2005]Dwu-Double-row

    假设一列交换表示为1,不换表示为0. 身高相同的两个人相当于给其中两列了一个限制条件,要么是两个必须相等,要么一个为零一个为一. 有了关系后我们就可以把每列当成一个点建边,边权为0表示必须相同,1为必 ...

  9. python之旅:python中range()和len()函数区别

    函数:len() 作用:返回字符串.列表.字典.元组等长度 语法:len(str) 参数: str:要计算的字符串.列表.字典.元组等 返回值:字符串.列表.字典.元组等元素的长度 实例 1.计算字符 ...

  10. Qt Creater之hello world

    下载Qt Creater,博主是Qt5.2.0版本: 15:17:16 打开界面,选择文件新项目, 文件名:hellodemo: 生成的文件有.pro时项目文件,包含项目的信息,mainwindow. ...