CSS三大特性—— 继承、 优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类　　

首先来看一下css选择符(css选择器)有哪些?

　　1.标签选择器(如：body,div,p,ul,li)

　　2.类选择器(如：class="head",class="head_logo")

　　3.ID选择器(如：id="name",id="name_txt")

　　4.全局选择器(如：*号)

　　5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

　　6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

　　7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

　　8.继承选择器(如：div p,注意两选择器用空格键分开)

　　9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、hover、active。注意:必须将伪类写在本身选择器之后,并且是伪类也有顺序link、visited、hover、active,就是LVHA，这个叫爱恨原则，LoVe/HAte)

　　10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。  
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。  
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素

　　11.子选择器 (如：div>p ,带大于号>)

　　12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

css优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别时:

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

      总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别:

选择器类别 说明 权重表示 权值表示
行内样式 行内只有一个 style = "" （1.0.0.0）  1000
id选择器 selector中使用了几个id，即#的个数 （0.1.0.0）    100
类选择器

类,伪类,以及属性的个数，如： .outerClass .buttonClass[type="button"]:hover{}

选择器中有2个类,1个属性,1个伪类(0.0.4.0)

 （0.0.1.0）      10
元素选择器

伪元素和标签元素的个数，如： p:first-child

选择器中有一个标签元素p和一个伪元素first-child

 （0.0.0.1）        1

注意:权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高

例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>cssTest</title>

    <style type="text/css">

        div.test{

            background-color:black;

            width:100px;

            height: 100px;

        }

    /*权重为0011*/

        .test.test2{

            background-color:red;

            width:100px;

            height: 100px;

        }

    /*权重为0020*/

    </style>

</head>

<body>

<div class="test test2"></div>

</body>

</html>

根据选择器中规则对应做加法，比较权值，从左到右进行比较，大的优先级越高,如果权值相同那就后面的覆盖前面的了

之前有个面试官问我权重问题.题目如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>cssTest</title>

    <style type="text/css">

        div.test{

            background-color:black;

            width:100px;

            height: 100px;

        }

        .test{

            background-color:red;

            width:100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div class="test test2"></div>

</body>

</html>

div是什么颜色?

答案为黑色

div.test权重为0011,  .test的权重为0010,所以显示的是div.test的样式.

注意:

1.CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器;

2.CSS选择器的解析原则是从右往左的,这样的好处是尽早的过滤掉一些无关的样式规则和元素 ;

3.不要再id选择器前使用标签名(id选择是唯一的，加上标签名相当于画蛇添足);

4.尽量少使用层级关系；

5.使用类选择器代替层级关系.

参考:

https://www.cnblogs.com/zxjwlh/p/6213239.html

https://www.cnblogs.com/nangezi/p/9042973.html

css选择器---继承,优先级,层叠的更多相关文章

  1. CSS 选择器继承和层叠

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

  2. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  4. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  5. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  6. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  8. （转）css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  9. CSS 选择器及优先级

    CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...

随机推荐

  1. Linux基本文件类型

    Linux基本文件类型 基本文件类型 - : 普通文件 d : 文件目录 p : 管道文件 l : 软连接文件 c : 字符设备文件 s : socket文件

  2. Struts2学习笔记：DMI，多个配置文件，默认Action，后缀

    动态方法调用有三种方法: 1.同一Action多次映射,每个action标签的method对应要调用的方法. 当要调用的方法多了就会增加struts.xml文件的复杂性. 2.struts.Dynam ...

  3. Ubuntu notes

    ubuntu notes Table of Contents 1. backup data 2. Basics Ubuntu 3. Install, uninstall packages 4. Bas ...

  4. C语言基础--数据

    c语言中数据: 在8位单片机种最常用的数据类型就是: unsigned char: 无符号字符型,位宽1个字节,8个位,表示的范围0~255(2^8-1) 在32位单片机中最常用的数据类型就是: un ...

  5. const int * 和 int * const 傻傻分不清楚

    const int * a和int const *a一样,定义时不是必须初始化,指针可以指向其他变量,但是指向的变量的值不能修改. int * const定义时必须初始化,即必须指明指向哪个变量,定义 ...

  6. 数据库中间件MyCat学习总结（2）——MyCat-Web原理介绍

    Mycat是一个分库分表的基于java开发的数据库中间件,使用过程中需要有一个监控系统,mycat-web应运而生.mycat-web是一个使用SpringMVC + Mybatis的监控平台,使用常 ...

  7. 53. spring boot系列合集【从零开始学Spring Boot】

    前40章节的spring boot系列已经打包成PDF在csdn进行发布了,如果有需要的可以进行下载. 下载地址:http://download.csdn.net/detail/linxinglian ...

  8. MVC系统学习1—MVC执行流程

    用MVC来做开发也有一段时间了,但是感觉一直没入门,就徘徊在似懂非懂的层次,和去年刚毕业学习WebForm时一样,当时通过张子阳老兄的几篇文章,明白了请求处理流程,页面生命周期才真正明白了WebFor ...

  9. hdu 5017 模拟退火算法

    hdu 5017 http://blog.csdn.net/mypsq/article/details/39340601 #include <cstdio> #include <cs ...

  10. Ubuntu 16.04安装Sublime Text3

    1.安装: sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo apt-get instal ...