CSS选择器

 

一、CSS基础属性

 举列:h1{ color:red; text-align:  center; } 选择器:h1 声明块:{color:red; text-align:  center;}

                            

二、CSS选择器

CSS选择器,决定了将规则应用到哪些元素上

三种基本选择器:元素选择器、类选择器、ID选择器

除此之外,CSS还提供了大量的选择器

三、声明冲突

四、层叠概述

什么是层叠:层叠是一种机制,用于解决CSS声明冲突

多个相同的CSS声明(属性),应用到同一个元素上

五、层叠过程:

比较优先级每一个声明都有一个优先级

当发生冲突时,优先级高的会保留,优先级低的会被淘汰

一个声明的优先级,与它的来源和重要性有关

1.浏览器默认样式表中的声明

2.用户样式表中的普通声明

3.作者样式表中的普通声明

4.作者样式表中的重要声明

5.用户样式表中的重要声明

优先级由低到高排序

 

比较特殊性:每一个声明都有一个特殊性(Specificity)

当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰

一个声明的特殊性,取决于规则适用范围的大小

规则适用范围越大,特殊性越低,适用范围越小,特殊性越高

具体规则:

示列:

每一个声明都有一个特殊性(Specificity)

当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰

一个声明的特殊性,取决于规则适用范围的大小

规则适用范围越大,特殊性越低,适用范围越小,特殊性越高

 

 

比较源次序

最后出现的声明胜出,其他的全部淘汰

该规则的实际应用:

CSS Reset代码前置

a元素的伪类书写顺序

 

六、继承

继承:继承(inherit),指子元素会自动拥有父元素的某些CSS属性

CSS代码body{color:red}   

HTML代码:

<body>     body中的内容     <p>p元素中的内容</p> </body>

p元素自动拥有了父元素bodycolor属性

示列:

 

继承发生的场景

该属性是可继承的属性该属性在样式表中没有声明

原文地址:https://www.cnblogs.com/jrzqdlgdx/p/10948956.html