css样式继承体现

css样式继承体现

选择器再讲解（4+3+3+*）

四个基本选择器
通用选择器： *{property:value}

标签选择器：  标签名{ property:value }

id选择器：   #id名{ property:value }

类名选择器： .类名{ property:value }类就是被重用的，一个标签可以有多个类，一个类可以用在多个标签上

PS：挂类法编写样式

三套复杂选择器格式 （E、F为基本选择器）

后代选择器： E(有空格)F { property:value }空格表示后代，多层选择，不固定层次

交集选择器： E(没有空格)F { property:value } 不用任何字符隔开，后面的选择器一般是class或者id

并集选择器： E（逗号隔开）F{ property:value }

三个非常用选择器：（E、F为基本选择器）

子元素选择器：E>F{property:value} 右尖括号，符合F选择器的所有E子元素
直接相邻选择器：E+F{property: value} +号表示紧邻，当前选中元素后紧跟的后续一个元素
普通相邻选择器：E~F{property: value} ~兄弟后续元素，当前选中元素后的所有符合F选择器的元素

伪类选择：（E、F为基本选择器）

超链接选择：:link、:visited、:hover、:active
第一个子元素：E:first-child

伪对象/伪元素选择：（E、F为基本选择器）

文字选择：E::first-letter、E::first-line
插入内容：E::before、E::after

继承性相关说明

定义：有些样式属性，在给指定标签设置的时候，同时也给后代设置了，此性质就是继承性

条件：继承到样式的标签和定义样式的标签必须是从属关系（后代标签关系）

对文本样式设置的基本属性才能被继承（颜色color\样式text\字体font\行属性line）

所有关于对于盒子模型（div、span等）的属性设置（border、定位、布局）都不能被继承

CSS层叠性的相关说明

层叠性指的是样式的优先级，当产生冲突时以优先级高的为准

判断选择器的层叠效果：

1、通过权值判断法
2、通过每一个选择其中的id选择、类选择、标签选择数量来计做权值（ICE）（id>类>标签）
3、先比较id权值，再次比较类、最后比较标签
4、全部一样比较顺序

注意：数权值前提是一定要保证每一条选择器必须要选中的指定元素

权值判定注意点

1、看是否所有的选择器都选中了指定标签，如果全部选中就数权值

2、如果没有选中，则遵循就近原则

3、都选中同一级别，则看个体元素的权值

补充说明：important优先级最高，*优先级最低