第一种情况

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

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

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

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

选择器            权重
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#英文大小写快捷键

    选中一段英文 Ctrl+U 转小写 Ctrl+Shift+U 转大写

  2. Nullable<System.DateTime>日期格式转换 （转载）

    一.问题 1.html页面中时间显示出错,数据库中时间是正确的. 原因:没有把DateTime转成String类型. 2.  在C#中,发现不能直接使用ToString("yyyy-MM-d ...

  3. Intellij Idea乱码解决方案

    使用Intellij Idea经常遇到的三种乱码问题: 1.工程代码乱码 2.main方法运行,控制台乱码 3.tomcat运行,控制台乱码 解决方案: 1.工程代码乱码 Settings > ...

  4. Servlet—Cookie(显示用户上次访问时间、显示商品浏览历史)

    1 . 什么是会话? 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 1.1 会话过程中要解决的一些问题? 每个用户在使用浏览器 ...

  5. XML 和 JSON

    1. XML介绍 必须要有节点:根节点必须且只有一个,用户节点可以自定义. 2. JSON介绍: 3.生成json方法 json_encode() 4.xml生成字符串方法有几种 拼装字符串,或者ph ...

  6. git命令详解（ 四 ）

    此篇为git命令详解的第四篇,话不多说,我们直接上知识点好吧 git Push 偏离的工作 gitPush: 此命令负责将你的变更上传到指定的远程仓库,并在远程仓库上合并你的新提交记录.一旦 git ...

  7. css中那些属性可以被继承

    主要的有: 字体相关:line-height, font-family, font-size, font-style, font-variant, font-weight, font 文本相关: le ...

  8. 使用 ISO镜像配置 本地yum 源（RHEL, CentOS, Fedora等适用）

    使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用)   1.上传ISO镜像和挂载 1) 上传Centos7.2 ISO镜像到 /usr/local/src目录 2) ...

  9. python:异常处理、自定义异常、断言

    什么是异常: 当程序遭遇某些非正常问题的时候就会抛出异常:比如int()只能处理能转化成int的对象,如果传入一个不能转化的对象就会报错并抛出异常 常用的异常有: ValueError :传入无效的错 ...

  10. node webpack4.6简单配置

    package.json { "name": "his-web", "version": "0.0.0", " ...