第一种情况

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

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

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

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

选择器            权重
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. NIO学习笔记四 ：SocketChannel 和 ServerSocketChannel

    Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服务器. ...

  2. 支持开源，推动Orchard

    希望正在研究果园,和对果园感兴趣的,加入Orchard高级开发群,进行交流和讨论及深入研究Orchard开发,我们致力寻求志同道合推动Orchard发展的屌丝!!! 干净.专注.社区力量的圈子

  3. OSX系统下配置Apache+PHP+MySQL+Navicat

    概述 OSX系统对于PHP运行非常友好,我们只需要进行简单的配置便可以开始进行使用,本篇文章将一步一步地介绍Apache.PHP和MySQL的安装与配置,为开始进行开发铺好路 Apache 启动Apa ...

  4. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  5. vue2.0 element-ui中的el-select选择器无法显示选中的内容

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 < ...

  6. parseInt转换

    function parse2Int(num) { return parseInt(num,10); } 如果 string 以 "0x" 开头,parseInt() 会把 str ...

  7. 【图解】Web前端实现类似Excel的电子表格

    本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品.Google的在线SpreadSheet). 工具简介: ...

  8. Apache与Tomcat有什么关系和区别

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  9. python第二十九天-----继续学习第三模块——前几天旅行去了

    subprocess模块 import subprocess subprocess.getstatusoutput('dir')#接收字符串格式命令,返回元组形式,第1个元素是执行状态,第2个是命令结 ...

  10. 用python连接mysql失败总结

    所用环境:python3,pycharm2018.2.4 先用mysql创建用户并授予相关权限 在我用python连接mysql时,一直提示连接不上,报错原因就是,用户没有被给予相关权限,比如查询,插 ...