首页 > 其他分享 >css第五天

css第五天

时间:2023-07-03 21:12:56浏览次数:57  
标签:优先级 继承 important 第五天 选择器 css

优先级的介绍
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承<配符选择<签选择器< 类选择器<d选择<内样式important
注意点:
!important写在属性值的后面,分号的前面!
!important不能提升继承的优先级,只要是继承优先级最低!
实际开发中不建议使用!important .

 

标签:优先级,继承,important,第五天,选择器,css
From: https://www.cnblogs.com/aimiqi/p/17521846.html

相关文章

  • CSS(五)脱离文档流
    脱离文档流标准文档流导致:高矮不齐,底边对齐空白折叠现象很多空格,都会折叠会一个空格img标签有缝隙脱离文档流:使一个元素脱离标准文档流有三种方式:浮动绝对定位固定定位浮动增加浮动增加一个浮层来放置内容。可以理解为有两层页面,一层为原页面,一层......
  • CSS(六)CSS3新特性
    圆角和阴影圆角,使用border-radius可以给任何元素制作圆角阴影,box-shadow向框添加一个或多个阴影:box-shadow:h-shadowv-shadowblurcolorh-shadow水平阴影的位置v-shadow垂直阴影的位置blur模糊距离color阴影的颜色动画使用百分比来规定变化发生......
  • CSS(七)字体图标
    经常会用到一些图片,但是我们在使用这些图片时,往往会遇到失真的情况,而且图片数量多的话,页面加载很慢,所以我们可以使用字体图标的方式来显示图标,既解决了失真的问题,也解决了图片占用资源的问题。常用资源[阿里字体图标库][https://www.iconfont.cn/]优点:轻量,加载速度快,减少http......
  • CSS(四)盒子模型
    盒子模型boxmodelCSS盒子模型本质上是一个盒子,封装周围的HTML元素。它包括:margin(外边距)、border(边框)、padding(内边距)、content(内容) 弹性盒子模型flexboxfelxbox是CSS3的一种新的布局模式。是为了让页面适应不同的屏幕大小和设备类型,提供了一种更加有效的方式对容器中的......
  • CSS学习笔记2-CSS的继承_层叠_类型和CSS盒子模型
    1CSS属性继承CSS的某些属性具有继承性(Inherited):如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性;当然,如果后代元素自己有设置该属性,那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);如何知道一个属性是否具有继承性呢?......
  • HTML+CSS+JavaScript基础
    1、HTML(HypertextMarkupLanguage,超文本标记语言),用来向浏览器说明内容的结构、2、DOM(DocumentObjectModel,文档对象模型)指的是HTML标签的层次结构。每一对HTML标签(有的时候是一个标签)都是一个元素。3、CSS(CascadingStyleSheets,层叠样式表),控制DOM元素的视觉外观......
  • 利用这个css属性,你也能轻松实现一个新手引导库
    相信大家或多或少都在各种网站上使用过新手引导,当网站提供的功能有点复杂时,这是一个对新手非常友好的功能,可以跟随新手引导一步一步了解网站的各种功能,我们要做的只是点击下一步或者上一步,网站就能滚动到指定位置,然后高亮页面的一部分,并且配以一些图文介绍。目前有很多帮你实现这......
  • css学习(二)
    css盒子模型认识盒子模型我们可以把HTML每一个元素看出一个个的盒子.具备如图四个属性因为盒子有四边,所以margin/padding/border都包括top/right/bottom/left四个边内容设置内容是通过宽度和高度设置的:宽度设置:width,默认是auto,交给浏览器决定,块级元素独占一行.高......
  • css学习(一)
    css引入内联样式<divstyle="color:red;font-size:30px;">我是div元素</div>2.内部样式<style>/*找到class为.div-one的元素*/.div-one{color:red;font-size:30px;background-color:orange;}</style&g......
  • css添加背景图片
    方法一:<styletype="text/css">body{background:url("./lib/background.png")no-repeatcentercenterfixed;/*兼容浏览器版本*/-webkit-background-size:cover;-o-background-size:......