CSS继承和层叠性

CSS继承和层叠性

CSS选择器

四个基本选择器：

1.通用选择器（*{margin:0；padding：0}清除当前page下的所有标签默认样式）

2.标签选择器

3.ID选择器：ID选择器只能选中一个元素，只能对单个元素设置样式（id不能重复）

4.类名选择器（注意：类就是被重用的，一个标签可以有多个类，一个类可以用在多个标签上）

 

三套复杂选择器格式

1.后代选择器：空格表示后代。多层选择，不固定层次

2.交集选择器：不用任何字符隔开。后面的选择器一般是class或者id

3.并集选择器：逗号表示并集

 

 

三个非常用选择器：（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

 

复杂选择器：

后代选择：后代不是指儿子元素，是指后代元素

子元素选择：直接当前元素的儿子元素中寻找匹配的元素 

符号：右尖括号>

交集选择器：从当前选择器选中的元素中，找到子集

 

紧邻选择器：+号，1）紧随当前付选择器标准的后面元素  2）要符合后续选择器标准

 

伪类选择器：

伪类选择器主要是对于当前选择的元素进行筛选

a标签：link visited hover active

   当前超链没有访问的时候、访问过、鼠标悬浮、被触发

   注意：顺序不能乱

伪对象选择：

伪对象选择器主要是对当前选择的内容进行操作

E::before、E::after

在当前选择的元素前后者后插入内容

CSS层叠性

具体如何判断选择器的层叠效果呢？

1.     先判断是否选中。选中的优先级大于未选中的

2.     未选中的，遵循就近原则（选择越靠近那一层优先级越高）

3.     选中的情况下，优先级id>class>标签（就是直接数，id数目多的优先，id数目一样的情况下，class数目多的优先。以此类推）

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

CSS继承性

继承性：属性样式设置，给父元素设置后，所有子元素都拥有这些属性样式

能继承的属性：只有跟文本相关的属性才能被继承