css 样式加载次序
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权(本人理解为:先加载1的样式,然后用2的样式覆盖1中的样式,3、4同理)
- 浏览器缺省设置(浏览器默认的样式,不同浏览器的默认值可能不一样)
- 外部样式表(引用的外部css文件,一般的格式为:
<link rel="stylesheet" type="text/css" href="mystyle.css"> 。可以放到head 也可以放到body,据说放到body中的性能好一点
) - 内部样式表(位于 head 标签内部,一般的格式为:<style> </style>。设置的样式只写就好了)
- 内联样式(在 HTML 元素内部,例如:<p style=" color:red"></p> 或者<p color=red></p>)
在同一层样式中多重样式的优先次序如下,其中数字 6 拥有最高的优先权:(一般本人都是引用外部css文件,这里就以外部文件为例,即上面的2)
- 通用选择器(*) (一般格式为 *{margin:0;padding:0;} 。将全部元素的内外边框都设置成0)
- 元素(类型)选择器 (一般格式为 p{color:red;} 。将所有p元素的字体都设置成红色)
- 类选择器 (一般格式为 .text {color:red;} 。将所有class="text"元素的字体设置成红色。有时也会用p .text:只会重置<p>元素的)
- 属性选择器 (一般格式为 a[href][title] {color:red;} 。将所有同时拥有【href】和【title】的<a>元素的体设置成红色)
- 伪类 (一般格式为 a:link {color:red;} 。将所有未访问的<a>元素的字体设置成红色)
- ID 选择器 (一般格式为 #text {color:red;} 。将所有id="text"元素的字体设置成红色。有时也会用p #text:只会重置<p>元素的)
当然还会有规则破坏者!important:!important会覆盖所有样式并且不会被任何样式覆盖(超级流氓),可以理解为样式锁死状态,除非确认样式不该改变,否则不建议使用
css 样式加载次序的更多相关文章
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- 关于css样式加载的问题
今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- css文件加载:@import和link的区别
刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...
- CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...
- webpack教程(四)——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html
写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
随机推荐
- Spring中applicationContext.xml详解
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- phpStudy mysql升级至5.7
1.先停止mysql服务,卸载原来的mysql (其他菜单-->服务器管理--->MySQL--->卸载服务) 2.下载MySQL你需要的版本 ZIP Archive 版本 3.解压 ...
- 【算法笔记】B1025 反转链表
1025 反转链表 (25 分) 给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6 ...
- 非常不错的app和网站
置顶: word.pdf之间相互转换的网站: https://www.addpdf.cn 很棒啊 1. Global Potplayer 这个软件简直了,播放各种视频, 无论是本地的,还是在线的,都非 ...
- Asp.Net Cache缓存技术学习
本文参考自Fish Li的细说 ASP.NET Cache 及其高级用法 一.前言,相信大多数做网站开发的都知道缓存技术对于网站的重要性,它对于网站的性能优化起着至关重要的作用. 关于缓存的技术大致有 ...
- Scanner类中的nextToken()方法解读
下面看一下nextToken()方法的源码实现. 1.Java中的控制字符 case ' ': // (Spec 3.6) case '\t': // (Spec 3.6) case FF: // ( ...
- Thread -- Request
Servlet容器应该绝大部分(有可能全部)是Thread per Request,每个请求一个线程.此外有Thread per Connection,应该不是用于Servlet容器.请见 How a ...
- mysql去除重复记录案例
例1,表中有主键(可唯一标识的字段),且该字段为数字类型 1 测试数据 /* 表结构 */ DROP TABLE IF EXISTS `t1`; CREATE TABLE IF NOT EXISTS ...
- Oracle 12c JDBC 连接
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- R语言格式化数字和字符串format函数
数字和字符串可以使用 format()函数的格式化为特定样式. 语法 format()函数的基本语法是: format(x, digits, nsmall,scientific,width,justi ...