css选择器---继承,优先级,层叠
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有一套优先级的定义。
不同级别时:
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
总结排序：!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选择器---继承,优先级,层叠的更多相关文章
- CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载：详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- （转）css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- CSS 选择器及优先级
CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...
随机推荐
- Scrapy用Cookie实现模拟登录
模拟登录是爬取某些站点内容的一个关键,有些网站(特别是论坛类),不登录的话,一个数据也拿不到. 模拟登录有这样几个关键: 弄清楚登录的url一些网站打开出现登录的页面,地址栏大多数不是登录提交表单的u ...
- Django-报错解决方法
无法使用Django新建项目:'django-admin.py’不是内部或外部命令找到site-packages/django/bin(如 D:\Program Files\Anaconda3\Lib ...
- CTSC2018 Day2T1 Juice混合果汁
[题解] 在考场上A掉的题. 把美味度排个序,然后按照价格p为权值建立主席树,把每个果汁按照拍好的顺序添加进去.主席树上维护总升数cnt以及总价格sum.对于每个询问,我们二分一个美味值,check的 ...
- 【Codeforces 675D】Tree Construction
[链接] 我是链接,点我呀:) [题意] 依次序将数字插入到排序二叉树当中 问你每个数字它的父亲节点上的数字是啥 [题解] 按次序处理每一个数字 对于数字x 找到最小的大于x的数字所在的位置i 显然, ...
- HDU 1573 解同余模线性方程组
题目意思很直接就是一道裸的解线性同余模方程组的题目 #include <cstdio> #include <cstring> using namespace std; #def ...
- Win32编程API 基础篇 -- 2.一个简单的窗口 根据英文教程翻译
一个简单的窗口 例子:简单的窗口 有时人们在IRC提问,”我应该怎样制作一个窗口”...嗯,这恐怕不是完全这么简单好回答!其实这并不难一旦你明白你在做什么,但在你得到一个可展示的窗口之前还有一些事情需 ...
- HashMap源码分析2：扩容
本文源码基于JDK1.8.0_45. final Node<K,V>[] resize() { Node<K,V>[] oldTab = table; int oldCap = ...
- BP神经网络及其在教学质量评价中 的应用
本文学习笔记是自己的理解,如有错误的地方,请大家指正批评.共同进步.谢谢! 之前的教学质量评价,仅仅是通过对教学指标的简单处理.如求平均值或人为的给出各指标的权值来加权求和,其评价结果带有非常大主观性 ...
- cocos2d-x大版本号3.1系列一
本人博客,欢迎转载:http://blog.csdn.net/dawn_moon 项目忙完了.继续写我的博客.去cocos2d-x的官网看了下,不出所料.又有惊喜啊.3.0经过几个版本号的迭代,最终迎 ...
- 第十五周oj刷题——Problem M: C++习题 矩阵求和--重载运算符
Description 有两个矩阵a和b,均为2行3列.求两个矩阵之和.重载运算符"+",使之能用于矩阵相加(如c=a+b). 重载流插入运算符"<<&quo ...