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. PHP+Python，轻量维护超轻松

    window下安装Python 直接去Python官网下载msi安装程序安装即可(选择自定义安装才能修改程序安装路径哦) widows下Python的数据库访问模块PyMysql的安装 1.open ...

  2. Boundary Conditions

    test test Table of Contents 1. Boundary conditions 1.1. Neumann boudary condition vs Dirichlet BC 1. ...

  3. Spring MVC概述（2）

    1.Spring 为展现层提供基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一. 2.Spring 3.0后全面超越Struts2,成为最优秀的MVC框架. 3.Spring MVC ...

  4. nyoj 1112 求次数(map, set)

    求次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 题意很简单,给一个数n 以及一个字符串str,区间[i,i+n-1] 为一个新的字符串,i 属于[0,strl ...

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

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

  6. [luoguP1026] 统计单词个数（DP）

    传送门 题解 #include <cstdio> #include <cstring> #define max(x, y) ((x) > (y) ? (x) : (y)) ...

  7. QT .pro文件的学习收获

    1. 载pro文件预定义宏: CONFIG(debug,debug|release){ DEFINES+=__DEBUG__ }else{ DEFINES+=__RELEASE__ macx:DEST ...

  8. System.out.print()思考?

            System.out.print()思考       问题?                 System.out.pritln();  中是包名.类名.方法名吗? 解释: Syste ...

  9. Cisco IOU Web Interface ： Web IOU

    https://github.com/dainok http://sns.clnchina.com.cn/space.php?uid=404779&do=blog&id=4298 ht ...

  10. 设置默认訪问项目的client的浏览器版本号（IE版本号）

    在项目开发部署中.发现浏览器不兼容现象,在不处理兼容性情况下让用户更好体验(IE浏览器) 我们来设置client默认訪问项目的浏览器版本号 例如以下所看到的的是不同IE版本号下的效果截图比較: IE5 ...