CSS特性
css的特性
css具有两大特性：继承性和层叠性
1、继承性
指的是子元素继承父元素的样式，但没有所有的样式都可以继承（那样就太可怕了）
所以具有继承性的属性主要分为三大类
a、文本属性
font-size、font-family、font-style、font-weight、font、text-align、word-spacing、line-height、text-index
b、列表相关属性
list-style-image、list-style-position、list-style-type、list-style、
c、颜色相关属性
color
Q:为什么我设置了a元素父标签的color属性，但是a标签没有跟着发生变化
A：因为a标签具有默认样式，优先级高于继承性，所以要设置a标签的颜色属性就要对a标签单独进行
2、层叠性
<html>
<head>
<style type="text/css">
div{color:red;}
div{color:yelow;}
div{color:blue;}
</style>
</head>
<body>
<div>color</div>
<div>color</div>
<div>color</div>
</body>
<html>
运行后：
由于层叠性前面的样式被div{color：blue}覆盖，最后显示出来的都是蓝色
css发生层叠性的原则：
1、元素相同
2、属性相同
3、权重相同
css的优先级
层叠指的就是样式层叠，当样式的覆盖发生冲突时，以优先级高低为准
样式覆盖发生冲突有以下5种：
1、引用方式冲突
2、继承方式冲突
3、指定样式冲突
4、继承样式与指定样式冲突
5！important
引用方式冲突
css有3中引用方式：外部样式、内部样式、行内样式
优先级如下：
行内样式>（外部样式=内部样式）
<html> <head> <style type="text/css"> div{color:blue;} </style> <link href="index.css" type="text/css" rel="stylesheet"/> </head> <body> <div style="color:yellow;">color</div> </body> <html>
结果：
继承方式冲突
就是设置了当前元素的颜色属性等最近的祖先元素也设置了，样式继承了祖先的样式
指定样式冲突
当指定样式发生冲突，当前权重最高获胜
| 选择器 | 权值 |
| 通配符 | 0 |
| 伪元素 | 1 |
| 元素选择器 | 1 |
| class选择器 | 10 |
| 伪类 | 10 |
| 属性选择器 | 10 |
| id选择器 | 100 |
| 行内样式 |
1000 |
常见伪元素有四个：即::before,::after,::first-letter,::first-line
继承样式与指定样式发生冲突
指定样式获胜
就是从别人那继承的，都不如自己设定的优先级高
！important
如果一个样式使用！important来声明，那么这个样式会覆盖css中任何其他样式的声明
浙公网安备 33010602011771号