css学习之样式层级和权重
第一种情况
当选择器相同的情况下,引入方式的前后,决定页面最后的效果
---------外部在最后面显示
---------内部在最后面显示
第二种情况 引入方式相同时候,则是按照权重取最大(取权重最大值显示)去确定最后样式(此处以外部样式为例子)
选择器 | 权重 |
id | 100 |
类 | 10 |
元素 | 1 |
继承 | 0.5 |
例子二
虽然其他的很精确,但是权重还是id的最大,所以显示为id选择器属性
第三种情况 如果引入方式和选择器相同,则按最后的样式为主
第四种情况就是!important 会使用这个样式
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important
css学习之样式层级和权重的更多相关文章
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS学习摘要-引入样式
CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...
- CSS样式优先级和权重问题(部分)
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS学习笔记之样式声明
目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- c# 后台拼接分页Html
public static string ReplaceStr(string originalStr, string oldStr, string newStr) { if (string.IsNul ...
- 【WebSocket No.2】WebSocket和Socket实现聊天群发
介绍: 前面写过一篇简单的websocke实现服务端.这一篇就不在说什么基础的东西主要是来用实例说话,主要是讲一下实现单聊和群组聊天和所有群发的思路设计. 直接不懂的可以看一下上一篇简单版本再来看也行 ...
- Integer to Boolean strange syntax
Question: I'm less than a year into C++ development (focused on other languages prior to this) and I ...
- 洛谷P3722 [AH2017/HNOI2017]影魔(线段树)
题意 题目链接 Sol 题解好神仙啊qwq. 一般看到这种考虑最大值的贡献的题目不难想到单调数据结构 对于本题而言,我们可以预处理出每个位置左边第一个比他大的位置\(l_i\)以及右边第一个比他大的位 ...
- React中路由的基本使用
现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥. 注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的,零碎的小东西有点多 ...
- CloudSim源代码学习——服务代理商(DatacenterBroker)
DatacenterBroker.java文件如下: (其中,相关语句已经做好标注) /* * Title: CloudSim Toolkit * Description: CloudSim (Clo ...
- javasscript基础
一.使用JS完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和 ...
- Linux 操作系统主机名变成bogon怎么解决?
主机名变成bogon怎么解决? by:授客 QQ:1033553122 一:使用hostname命令 [laiyu@localhost ~]$ hostname localhost.localdo ...
- Flume组件汇总2
Component Interface Type Alias Implementation Class org.apache.flume.Channel memory org.apache.flume ...
- Ubuntu18---安装Redis和简单使用Redis
前言 Redis是常用基于内存的Key-Value数据库,比Memcache更先进,支持多种数据结构,高效,快速.用Redis可以很轻松解决高并发的数据访问问题:作为实时监控信号处理也非常不错. 环境 ...