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优先级最高,*优先级最低