设置css三种方法的优先级
有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在下面代码中就出现了这种情况
1、使用内联式CSS设置“超酷的互联网”文字为粉色。
2、然后使用嵌入式CSS来设置文字为红色。
3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。
感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面会讲解到。
示例:
style.css
span{
color:blue;
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:red;
}
</style> </head>
<body>
<p>xx网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>
设置css三种方法的优先级的更多相关文章
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...
- Qt下存储读写应用程序设置的三种方法
一.简介 用户对应用程序经常有这样的要求:要求它能记住它的settings,比如窗口大小.位置和密码等等.有三种方法可以实现: 使用注册表: 使用配置文件(.ini): 使用自定义文件(例如.txt) ...
- linux动态库默认搜索路径设置的三种方法
众所周知, Linux 动态库的默认搜索路径是 /lib 和 /usr/lib .动态库被创建后,一般都复制到这两个目录中.当程序执行时需要某动态库, 并且该动态库还未加载到内存中,则系统会自动到这两 ...
- [CentOS] 环境变量设置的三种方法
在CentOS系统中添加环境变量的方法有几种,推荐第三种方法.这里以添加 TexLive 2017 的环境变量为例进行说明. 1. 修改 ~/.bash_profile 文档,在文末添加以下代码: ...
- QT 窗体控件的透明度设置（三种方法）
整个窗体 当设置QT的窗体(QMainWindow, QDialog)时,直接用 targetForm->setWindowOpacity() 函数即可实现,效果为窗体及窗体内所有控件都透明 ...
- PHP中时区（timezone）设置的三种方法（转）
方法1: (最好的方法)在php.ini里加上找到date.timezone项,设置date.timezone = "Asia/Shanghai",重启环境就ok了. 方法2: 在 ...
- struts1.3设置编码三种方法
本文所写涉及的struts的版本是1.3x. 一.改写struts的ActionServlet. 重写process()方法: 配置相应的web.xml文件 三.通过Chain来处理: 使用cha ...
- Linux下环境变量设置的三种方法
如想将一个路径加入到$PATH中,可以像下面这样做: 1.控制台中设置,不赞成这种方式,因为他只对当前的shell 起作用,换一个shell设置就无效了:$PATH="$PATH" ...
随机推荐
- 最好的JAVA IDE IntelliJ IDEA使用简介（一）—之界面元素
打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来进入到IDEA的主界面),主界面显示如下: 主界面由6个主要区域组成(图中红色数字标注的) 1.菜单和工具栏 2.导 ...
- Oracle imp 不同字符集导入
有一个dmp文件是US7ASCII字符的,现有数据库是UTF8字符集,按照查到的资料看说是UTF8是US7ASCII超级可以自动转换导入.但是导入的时候某些字段超长,导致一个表导入错误. 解决办法,讲 ...
- （转载）mysql书籍
(转载)http://blog.csdn.net/symdfbb/article/details/7636332 MySQL技术内幕 mysql使用大全,可以说方方面面都包括了.认真研读大概一本就差不 ...
- 制作手机浏览器显示格式的HTML页面
最近要推出手机支持访问的HTML页面效果,而这在制作手机页面的过程中状况连连. 主要一下就我制作的工程中所遇的问题说明一下: 1. 改掉HTML页面声明:(以往大部分页面都是HTML4.0的声明) 还 ...
- 任意轴算法 ( Arbitrary Axis Algorithm )
已知三维空间中任意单位向量,求以该向量为Z轴的local正交坐标系: 如上图,每个模型都有自己local 坐标系,已知其中一个朝向求另外两个方向. 在autodesk中采用的是Arbitrary Ax ...
- leetcode First Missing Positive hashset简单应用
public class Solution { public int firstMissingPositive(int[] A) { HashSet<Integer> hash=new H ...
- 对C++进行优化了的android-ndk-r6-crystax-2
https://www.crystax.net/en/android/ndk/6?id=6 Here is customized distribution of Android NDK r6 whic ...
- winform DataGridView双击修改单元格的值 分类： DataGridView 2014-08-04 19:39 150人阅读 评论(0) 收藏
定义全局变量 string abcmycode = "";//当前行自编号 bool tf = false;//是否双击 //双击可编辑 private void ...
- windows下安装pip
1.在安装pip前,请确认win系统中已经安装好了python,和easy_install工具,如果系统安装成功,easy_install在目录C:\Python27\Scripts 下面,确认截图如 ...
- Linux系统的Cache工作原理和管理机制
Linux系统Cache 管理是 Linux 内核中一个很重要并且较难理解的组成部分.本文详细介绍了 Linux 内核中文件 Cache 管理的各个方面,希望能够帮助到你. 操作系统和文件 Cache ...