首页 > 其他分享 >CSS_三大特性下_优先级

CSS_三大特性下_优先级

时间:2023-06-10 21:45:27浏览次数:56  
标签:层叠 特性 important 三大 优先级 选择器 CSS

CSS三大特性

1、继承性

CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com)

2、层叠性

CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com)

3、优先级

3.1基本

1特性:
不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

2优先级公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

3注意点:
1、!important写在属性值的后面,分号的前面!
2、!important不能提升继承的优先级,只要是继承优先级最低
3.、实际开发中不建议使用!important。

div{
	color:green !important;
}

3、2权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)

uTools_1686398765212

比较规则:
1、先比较第一级数字,如果比较出来了,之后的统统不看
2、如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3、如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点:!important如果不是继承,则权重最高,天下第一!

标签:层叠,特性,important,三大,优先级,选择器,CSS
From: https://www.cnblogs.com/ZWeva/p/17471885.html

相关文章

  • CSS_特性继承和层叠
    CSS特性1、继承性特性:1、子元素有默认继承父元素样式的特点(子承父业)2、可以继承的常见属性(文字控制属性都可以继承)1.color2.font-style、font-weight、font-size、font-family3.text-indent,text-align4.line-height注意点:可以通过调试工具判断样式是否可以继承2、层叠......
  • CSS_显示某块和标签嵌套
    一、显示模块1、块级元素特点:1.独占一行(一行只能显示一个)2.宽度默认是父元素的宽度,高度默认由内容撑开3.可以设置宽高例如:div、p、h系列、ul、li、dl、dt、dd、form、header、.nav、footer.2、行内元素特点:1.一行可以显示多个2.宽度和高度默认由内容撑开3.不可以设......
  • css层
    add.css.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:999;}.popup{display:none;position:fixed;top:50%;left:......
  • CSS: offsetTop offsetLeft offsetParent
     offsetParentiscontainingblock 1.position:static;offsetTop元素的上外边距到containingblock的上内边距(containingblock的padding+element.margin)<!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"&g......
  • CSS: Determine if an element has been totally scrolled
     Element:scrollHeightproperty-WebAPIs|MDN(mozilla.org) <!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge......
  • CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight
       <!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"cont......
  • (HTML+CSS+JS)实现弹球游戏
    一、前言弹球游戏是一款很经典的游戏了,小时候无论是在掌机还是电脑都有玩过这款游戏,简简单单朴实无华,接下来我们通过前端代码来简单实现一下这个游戏吧。这是一个基于HTML5Canvas的弹球游戏的实现,通过JavaScript语言实现游戏的核心逻辑。主要包括以下部分:定义了canvas元素并......
  • CSS选择器
    前言CSS选择器用于选择具体的元素添加CSS样式。记下笔记。选择器类型类型选择器(Typeselectors)类型选择器通过结点名称匹配元素。语法&实例结点名称{样式声明}属性选择器(Attributeselectors)属性选择器用来匹配包含特定属性或者属性值的元素语法&实例[attr]表示带......
  • threejs-css2dObject操作之物体遮挡标签后应该隐藏,而不是出现透视效果
    先看coding之前的效果: 这些在背面的标签的,转到一定角度,被模型遮挡后,理论上就不应该被看到。这才是比较符合实际的coding之后(另一侧对称点就被隐藏): 具体代码(j借助于光线投影)://绑定鼠标事件,当用户移动视角后触发()functionbindRayShotEvent(){document.addEvent......
  • 下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS
    需求:点击下拉菜单按钮,显示子菜单并有过渡效果过渡效果:缓慢展开收起环境:vue2CSS分析:子菜单的高度有没有固定,如果子菜单的高度固定,可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果图片展示:展开状态收起状态 实现代码:<template><div>......