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- ...
随机推荐
- 2016级算法期末上机-I.难题·ModricWang's Fight with DDLs III
1126 ModricWang's Fight with DDLs III 思路 由于题目中已经说明了时间经过了正无穷,因此初始位置是不重要的,并且每条边.每个点的地位是均等的.因此到达每个点的概率就 ...
- SUSE Linux Enterprise Server设置IP地址、网关、DNS
说明: ip:202.118.83.247 子网掩码:255.255.255.0 网关:202.118.83.2 dns:8.8.8.8 / 8.8.4.4 1.设置ip $ vi /etc/sysc ...
- 再也不怕aop的原理了
1 aop是什么 java的核心思想是面向对象,aop是面向切面编程.是对面向对象的一个补充,简单通俗的理解下aop,假设我们上楼梯,我的目标是三楼,我直接朝我的三楼直接过去,但是我可以在二楼的时候去 ...
- .Net Core 使用NLog记录日志到文件和数据库
NLog 记录日志是微软官方推荐使用. 接下来,通过配置日志记录到文件和Sql Server数据库. 第一步:首先添加包NLog.Config (可通过微软添加包命令Install-Package 包 ...
- appium Capabilities的各个标签
今天详解一下Capabilities的各个标签,以后如果用得着可以随时翻阅. General Capabilities 标签 概述 值 automationName 使用引擎 默认为Appium,其中 ...
- servlet的url-pattern规则
https://www.cnblogs.com/canger/p/6084846.html
- 基于nightmare的美团美食商家爬虫实践
前言美团商家页分析需要爬取的数据有(这里没有按人数爬)爬虫工具选取pysipderscrapynightmare同步任务js动态加载中断继续爬坑总结示例代码 前言 上学的时候自己写过一些爬虫代码,比较 ...
- Mac下快速新建txt文件
1.打开终端,定位到桌面 cd desktop 2.输入 vi test.txt 此时,一个txt文件就会建立在桌面上,操作vi时的提示:按[i]为输入内容,编辑好之后按[esc]键,然后输入[:wq ...
- Python离线安装依赖包
1.制作requirement.txt pip freeze > requirement.txt 2.下载离线Pytho安装包 pip download -r requirement.txt - ...
- ANR机制
1.什么是ANR(Application Not Responding) 在Android中,应用程序的响应性是由ActivityManager和WindowManager系统服务监视的.当监测到以下 ...