有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置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三种方法的优先级的更多相关文章

  1. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  2. css - 三种方法解决LI和内部Img的上下间距问题

    在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

  3. Qt下存储读写应用程序设置的三种方法

    一.简介 用户对应用程序经常有这样的要求:要求它能记住它的settings,比如窗口大小.位置和密码等等.有三种方法可以实现: 使用注册表: 使用配置文件(.ini): 使用自定义文件(例如.txt) ...

  4. linux动态库默认搜索路径设置的三种方法

    众所周知, Linux 动态库的默认搜索路径是 /lib 和 /usr/lib .动态库被创建后,一般都复制到这两个目录中.当程序执行时需要某动态库, 并且该动态库还未加载到内存中,则系统会自动到这两 ...

  5. [CentOS] 环境变量设置的三种方法

    在CentOS系统中添加环境变量的方法有几种,推荐第三种方法.这里以添加 TexLive 2017 的环境变量为例进行说明. 1. 修改  ~/.bash_profile  文档,在文末添加以下代码: ...

  6. QT 窗体控件的透明度设置（三种方法）

    整个窗体 当设置QT的窗体(QMainWindow, QDialog)时,直接用 targetForm->setWindowOpacity()   函数即可实现,效果为窗体及窗体内所有控件都透明 ...

  7. PHP中时区（timezone）设置的三种方法（转）

    方法1: (最好的方法)在php.ini里加上找到date.timezone项,设置date.timezone = "Asia/Shanghai",重启环境就ok了. 方法2: 在 ...

  8. struts1.3设置编码三种方法

    本文所写涉及的struts的版本是1.3x. 一.改写struts的ActionServlet. 重写process()方法: 配置相应的web.xml文件   三.通过Chain来处理: 使用cha ...

  9. Linux下环境变量设置的三种方法

    如想将一个路径加入到$PATH中,可以像下面这样做: 1.控制台中设置,不赞成这种方式,因为他只对当前的shell 起作用,换一个shell设置就无效了:$PATH="$PATH" ...

随机推荐

  1. 2.5.3 使用alertDialog创建自定义对话框

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  2. Android网络框架Volley(实战篇)

      之前讲了ym—— Android网络框架Volley(体验篇),大家应该了解了volley的使用,接下来我们要看看如何把volley使用到实战项目里面,我们先考虑下一些问题: 从上一篇来看 mQu ...

  3. Linux Kernel TUNSETIFF释放后重用本地拒绝服务漏洞(CVE-2013-4343)

    漏洞版本: Linux kernel <= 3.11 漏洞描述: BUGTRAQ ID: 62360 CVE(CAN) ID: CVE-2013-4343 Linux Kernel是Linux操 ...

  4. Windows 8 关闭无线后无法打开WIFI的解决办法

    转:http://blog.sina.com.cn/s/blog_49d02ed101016b4n.html 在使用 Windows 8 的过程中,遇到过几次使用键盘上的功能键(笔者笔记本上的快捷键是 ...

  5. Unity3d HDR和Bloom效果（高动态范围图像和泛光）

    文章开始先放两组效果,文章结尾再放两组效果本文测试场景资源来自浅墨大神,shader效果为本文效果 HDR 人们有限的视觉系统,只支持16.7百万的颜色,超出这个范围的颜色就不能显示了bmp或jprg ...

  6. eclipse配置j2ee项目

    1.下载jdk (1.5,1.6) 安装 从sun的官方网站下载,我下的是jdk-1_5_0_19-nb-6_5_1-windows-ml.exe,集成netbean的版本,下载后一路默认安装. 配置 ...

  7. [转]让程序在崩溃时体面的退出之Unhandled Exception

    原文地址:http://blog.csdn.net/starlee/article/details/6613424 程序是由代码编译出来的,而代码是由人写的.人非圣贤,孰能无过.所以由人写的代码有缺陷 ...

  8. Live555 Streaming from a live source

    https://www.mail-archive.com/live-devel@lists.live555.com/msg05506.html-----ask--------------------- ...

  9. hdoj 4324 Triangle LOVE【拓扑排序判断是否存在环】

    Triangle LOVE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  10. kafka leader 服务器均衡。

    Whenever a broker stops or crashes leadership for that broker's partitions transfers to other replic ...