9.前端--CSS-三大特性

这篇具有很好参考价值的文章主要介绍了9.前端--CSS-三大特性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则:

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠
    9.前端--CSS-三大特性,前端,前端,css

2.继承性

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。

9.前端--CSS-三大特性,前端,前端,css
子元素可以继承父元素的样式:(字体,文本,颜色均可继承)

(text-,font-,line-这些元素开头的可以继承,以及color属性)

行高的继承性:

 body {
   font:12px/1.5 Microsoft YaHei;
 }
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为 1.5
  • 此时子元素的行高是:当前子元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3.优先级

同一个元素指定多个选择器,就会有优先级的产生。

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行

选择器优先级计算表格:
9.前端--CSS-三大特性,前端,前端,css
!import的使用举例
9.前端--CSS-三大特性,前端,前端,css
优先级注意点:

  1. 权重是有4组数字组成,但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
  3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
  4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
  5. 继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。文章来源地址https://www.toymoban.com/news/detail-823795.html

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

到了这里,关于9.前端--CSS-三大特性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 21.2 CSS 三大特性与页面布局

    2.1 层叠性 2.2 继承性 2.3 优先级 3.1 div页面布局 3.2 span局部更改样式 3.3 结构错误 4.1 块级元素 4.2 行内元素 4.3 行内块级元素 5.1 块级元素转行内元素 5.2 行级元素转块级元素 5.3 转为行内块级标签

    2024年02月11日
    浏览(27)
  • CSS_三大特性下_优先级

    CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) 1特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式 2优先级公式: 继承通配符选择器标签选择器类选择器id选择器行内样式!important 3注意点:

    2024年02月08日
    浏览(45)
  • CSS3-三大特性-继承性、层叠性、优先级

        CSS三大特性         1 继承性         2 层叠性         3 优先级         1 继承性             特性:子元素有默认继承父元素样式的特点(子承父业)             可以继承的常见属性:                 1 color                 2 font-style、font-weight、font-size、fo

    2024年02月11日
    浏览(31)
  • 〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专栏\\\"加入社区获取 所有 付费专栏的内容之外, 还可以通过加入 星荐官共赢计划 加入私域社区。 当前子专栏 基础入门

    2024年02月01日
    浏览(31)
  • 前端三大Css处理器之Less

    Less是Css预处理器之一,分别有Sass、Less、Stylus这三个。         Less https://lesscss.org/         Less 是用JavaScript编写的,事实上,Less是一个JavaScript库,他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。 Less的少数缺点之一是它 不支持函数 。 Less的语法与Scss十

    2024年02月10日
    浏览(36)
  • 【前端 - CSS】第 17 课 - CSS 特性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、CSS 三大特性 2.1、继承性 2.2、层叠性 2.3、优先级 3、总结          CSS 是一种用于样式化网页的语言,它具有 选择器 和 属性 的结构。通过

    2024年02月10日
    浏览(38)
  • 【前端】CSS3新特性

      css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。   写这篇文章主

    2024年02月09日
    浏览(26)
  • 〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动

    当前子专栏 基础入门三大核心篇 也是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益 。 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专栏\\\"加入社

    2024年02月03日
    浏览(37)
  • 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月19日
    浏览(40)
  • 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月15日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包