我们都知道css有3种基本设置方式即

1、行内也叫嵌入式 例如：

<div style='background:red'></div>

2、内联式，在html文件中用style标签包裹着的 例如：

<html>

  <style type='text/css'>

     div{

        background:red;

     }

  </style>

</html>

3、链接式，在html文件中用link标签引用进来着的 例如：

<html>

  <link rel='stylesheet' type='text/css' href='style.css'/>

</html>

注：还有一种@import写法不太常用兼容性也有问题忽略了

当我们同时使用这三种方式来对同一目标元素设置样式的时候优先级是 行内>内联>链接

一般情况下在同一种方式（文件）按照谁在后面谁的优先级最高，这个很多人都知道，

但是也有很多人忽视了不同的选择器也有优先级。

首先我们先来回忆下css的选择器类型吧

#id名 { 属性名:属性值; }

.class名 { 属性名:属性值; }

标签名 { 属性名:属性值; }

这是3中基本选择器还有他们相互结合的复合选择器

我们写一个css样式文件引入到css.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css优先级讨论</title>

</head>

<link rel="stylesheet" type="text/css" href="base.css"/>

<body>

  <div id='red' class='blue' >颜色</div>

</body>

</html>

base.css文件如下

@charset "utf-8";

/* CSS Document */

#red{

  color:red;

}

.blue{

  color:blue;

}

div{

  color:black;

}

这3个样式设置都是针对一个元素且都在链接文件中应该按照顺序后面覆盖前面的才对但是浏览器运行的结果却是

这就说明id选择器优先级最高 ，具体的选择器权重请看下图

通过这个图片我们就可以计算哪种设置的优先级高了，同时我们也会意识到有可能链接的优先级会大于嵌入式哦！在实际中也会经常越到这种因问题导致的出错，现在来看一个实际的例子

在这个页面中针对按钮 ”下一步“的color属性有3次设置，而且都是在base.css文件中，后面的颜色值没有覆盖前面的设置变成白色，因为第一个圈里的使用的是类+标签 权重为11  第二个使用类 权重是10 最后一个是标签权重为1  自然是第一个设置的生效 解决方法很简单在第二个选择器上改一下结果如下

权重值相等后面覆盖了前面，就是这些了，不足错误之请指出。

css引入方式优先级以及不同选择器的优先级区别的更多相关文章

  1. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  2. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  3. 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  4. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  5. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  6. css知多少（6）——选择器的优先级（转）

    css知多少(6)——选择器的优先级   1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...

  7. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  8. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  9. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. Lua 学习笔记（三）表达式

    Lua中的表达式中可以包含数字常量.字面字符串.变量.一元和二元操作符及函数调用.表达式用于表示值.当然表达式中还可以包含函数定义以及table构造式.Lua中的操作符有:算术操作符.逻辑操作符.关系 ...

  2. 转载----How fast is Redis?

    How fast is Redis? Redis includes the redis-benchmark utility that simulates running commands done b ...

  3. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  4. Linux 启动过程分析

    本文仅简单介绍Linux的启动过程,在此基础上做简要的分析.对于Linux启动过程中内部详细的函数调用不做介绍,只是希望本文能给新手起到一个抛砖引玉的作用,以便深入研究Linux的启动过程.下图基本展 ...

  5. jQuery.queue源码分析

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...

  6. Android 网络通信API的选择和实现实例

    Android开发网络通信一开始的时候使用的是AsyncTask封装HttpClient,没有使用原生的HttpURLConnection就跳到了Volley,随着OkHttp的流行又开始迁移到OkH ...

  7. C#简单问题，不简单的原理：不能局部定义自定义类型（不含匿名类型）

    今天在进行代码测试时发现,尝试在一个方法中定义一个委托,注意是定义一个委托,而不是声明一个委托变量,在编写的时候没有报错,VS也能智能提示,但在编译时却报语法不完整,缺少方括号,但实际查询并没有缺少, ...

  8. 实现UniqueAttribute唯一性约束-优化版

    我之前就写过一篇<实现UniqueAttribute唯一性约束>,虽然实现了通过调用IsValid方法可以进行唯一性验证,但有一个缺点,那就是耦合度过高,原因是里面的DB上下文对象是直接写 ...

  9. ROS 多台电脑间进行通信

    版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5773822.html 在我看来,ROS最牛逼的地方就是它的通信机制了,不仅仅是进程间 ...

  10. SQL--语句的执行顺序