HTML5前端开发入门之CSS的三大特性(继承性,层叠性,优先级)

小编 2026-06-29 阅读:1835 评论:0
Css的三大特性(继承性,层叠性,优先级) 1.什么是继承性 作用:给父元素设置一些属性,子元素也可以使用,这个我们称之为继承性 注意点: 1.并不是所有的属性都可以继承 只有以color/fon...

Css的三大特性(继承性,层叠性,优先级)

1.什么是继承性

作用:给父元素设置一些属性,子元素也可以使用,这个我们称之为继承性

注意点:

1.并不是所有的属性都可以继承

只有以color/font-/text-/line开头的属性才可以继承

2.在CSS的继承中,不仅仅是儿子可以继承,只要是后代都可以继承

3.CSS继承性中的特殊性

3.1 a标签的文字颜色和下划线是不能继承的

3.2 h标签中的文字大小是不能继承的

 

应用场景:

一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容

例如:body{}

1.什么是层叠性

作用:层叠性就是CSS处理冲突的一种能力

 

注意点:

层叠性只有在多个选择器选中“同一个标签”

然后又设置了“相同的属性”,才会发生层叠性

 

CSS全称 Cascading(层叠式) StyleSheet(样式表)

1.什么是优先级

作用:当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定

2.优先级判断的三种方式

2.1是否时直接选中(间接选中就是指继承)

 如果是间接选中,那么就是谁离目标标签近,就听谁的

2.2相同的选择器(直接选中)

 如果都是直接选中,并且都是同类型的选择器,那么谁写在后面就听谁的

2.3不同选择器(直接选中)

 如果都是直接选中,并且不是同类型的选择器,那么就会按照选择器的优先级来层叠

 优先级顺序:

 id>类>标签>通配符>继承>浏览器默认

 

3.优先级之important

1.什么是important

作用:用提升某个直接选中的标签的1选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高

 

注意点:

1.important只能用于直接选中,不能用于间接选中

2.通配符选择器选中的标签也是直接选中的

3.!important只能提升被指定的属性的优先级,其他的属性的优先级不会被提升

4.!important必须写在属性值的;号前面

5.!important前面的!不能省略

 

4.优先级之权重

1.什么是优先级的权重?

作用:当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高

 

2.权重的计算规则

2.1首先先计算选择器中有多少个id,id多的选择器优先级最高

2.2如果id的个数一样,就看类名的个数,类名个数多的优先级最高

2.3如果类名的个数一样,再看标签名称的个数,标签名称个数多的优先级最高

2.4如果id个数/类名个数/标签名称个数都一样,那么就不会继续往下计算了,那么此时谁写在后面听谁的

 也就是说优先级一样,那么谁写在后面听谁的

 

注意点:

1.只有选择器是直接选中标签的才需要计算权重

版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

热门文章
  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家,北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块,利用它可以实现现场温度值、相对湿度值的采集,同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃~85℃工业级带...
  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model):对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N},我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N},即:p(...
  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后,浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候,浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录  Http是无状态的,就是连接时数据互通,关闭后...
  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数: floor、round、ceil、cos、log2等 字符串函数: length、reverse、trim、lower、get_json_object、repeat等 收集函数: size 转换函数: cast 日期函数: year、month、datediff、date、date_add等 条件函数: coalesce、case…w...
  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理:i.用户C访问正常网站A时进行登录,浏览器保存A的cookieii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参数iii.而攻击网站B在访问网站A的时候,浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态,所以...
标签列表