CSS的三大特性

一、继承性( Inherited ):给父元素设置的属性,子孙元素也可以使用。
应用场景:一般用于设置网页上的一些共性信息,文字大小、字体颜色等

注意点:
1、不是所有的属性都可以继承,只有以 color / font- / text- / line 开头的属性才可以继承。
2、继承性中的特殊性:
a标签中的文字颜色和下划线,不能通过继承修改(不是亲生的)
h标签中的文字大小,不能通过继承修改(不是亲生的)

二、层叠性:CSS处理冲突的一种能力

注意点:
层叠性只有在多个选择器中选择同一个标签,然后又设置了相同的属性,才会发生层叠。

CSS:层叠式样式表

三、优先级:当多个选择器选择同一个标签,并且给同一个标签设置属性时,如何层叠由优先级来决定。

优先级判断的三种方式:
-是否是直接选中:间接选中就是继承方式,如果是间接选中,谁离目标标签比较近就听谁的。

-是否是相同的选择器:如果是相同选择器,谁写在后面就听谁的。

-是否不同的选择器:按照选择器的优先级层叠

优先级:
id > 类 > 标签 > 通配符(也是直接选择器) > 继承 > 浏览器默认

优先级 ! important :用于提升优先级权限,只能用于直接选择器,不能用于间接选择器。

格式:
id选择器 {color:red; }
标签选择器 {color:green !important;} // 提升优先级,此时 标签优先于 id

优先级的权重:当多个选择器混合在一起设置属性时,可以通过权重来计算哪一个选择器的优先级最高。

权重计算规则:
1、属性设置时,id选择器最多的优先级最高
2、id选择器一样多时,类名选择器多的优先级最高
3、类名选择器一样多时,标签选择器多的优先级最高
4、id选择器一样多、类名选择器一样多、标签选择器一样多时,权重停止计算,写在最后的选择器的优先级最高。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS的继承性 什么是继承性 作用给父元素设置一些属性,子元素也可以使用。就是继承性 注意点 只有以color/f...
    Isaacyyy阅读 2,854评论 0 1
  • 1.继承属性 作用:给父元素设置一些属性,子元素也可以使用 使用范围: 1.color/font-/text-/l...
    5a4982b9b5fe阅读 1,549评论 0 0
  • 1)层叠性1,给一个标签设置的样式发生冲突的时候即样式的覆盖2,浏览器的渲染机制是从上到下的,当有冲突的时候就采用...
    huhu502阅读 8,338评论 4 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 3,490评论 0 0

友情链接更多精彩内容