第一种情况

当选择器相同的情况下，引入方式的前后，决定页面最后的效果

---------外部在最后面显示

---------内部在最后面显示

第二种情况 引入方式相同时候，则是按照权重取最大(取权重最大值显示)去确定最后样式(此处以外部样式为例子)

选择器            权重
id 100
类 10
元素 1
继承 0.5

例子二

虽然其他的很精确，但是权重还是id的最大，所以显示为id选择器属性

第三种情况  如果引入方式和选择器相同，则按最后的样式为主

第四种情况就是!important 会使用这个样式

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important

css学习之样式层级和权重的更多相关文章

  1. 关于css里决定样式优先级的权重

    最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  4. css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  5. CSS学习摘要-引入样式

    CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...

  6. CSS样式优先级和权重问题（部分）

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  7. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  8. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  9. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

随机推荐

  1. c# 虚拟路径转换为绝对路径

    /// <summary> /// 解析相对Url /// </summary> /// <param name="relativeUrl">相 ...

  2. Linux常用基本命令：三剑客命令之-awk格式化动作

    我们之前说过,awk是一个超强的文本格式化工具,而本文的printf动作就是经常用来做格式化文本的.使用方式跟c语言的printf差不多. 1,printf默认不会回车换行 ghostwu@dev:~ ...

  3. mysql远程连接 Host * is not allowed to connect to this MySQL server（第一次配置好lnmp环境）

    1.第一次在linux上搭建好mysql,本机windows远程链接报错Host * is not allowed to connect to this MySQL server 2.原因:mysql ...

  4. 【读书笔记】iOS-iOS AirPlay与AppleTV

    享受高清晰影院般的大屏幕电影带来的快乐,单纯的iOS设备实现这些是不可能的.苹果有一套解决方案,iOS设备把这些视频和音效数据无线传输(WiFi或蓝牙)Apple TV,然后由Apple TV将视频和 ...

  5. Android Studio 在项目中引用第三方jar包

    在Android Studio项目中引用第三方jar包的方法: 步骤: 1.在build.gradle文件中添加如下代码: 备注:要添加在Android作用域下 sourceSets { main { ...

  6. Android系统启动流程 总结

    整体流程大致如下:   Android系统的启动,主要是指Android手机关机后,长按电源键后,Android手机开机的过程.从系统角度看,Android的启动程序可分为:   1.bootload ...

  7. Android-仿“抖音”的评论列表的UI和效果

    在design包里面 有一个 BottomSheetDialogFragment 这个Fragment,他已经帮我们处理好了手势,所以实现起来很简单.下面是代码: public class ItemL ...

  8. Expo大作战(三十三)--expo sdk api之MapView（地图），MailComposer（磁力传感计），Lottie（动画）

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  9. recovery 强制执行恢复出厂设置（Rescue Party）

    有时候我们在系统正常运行的时候,突然跑到recovery里面了,并且停在了如下界面:   Can't load Android system. Your data may be corrupt. If ...

  10. mybatis学习系列二

    1 参数处理(封装map过程)(23) 1.1)F5进入断点:Employee employee1=mapper.selectEmployeeByMap(map); 1.2)进入MapperProxy ...