我们都知道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. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  2. 在Mac下配置php开发环境：Apache+php+MySql

    /private/etc/apache2/httpd.conf 一.启动Apache sudo apachectl start sudo apachectl -v   可以查看到Apache的版本信息 ...

  3. Azure REST API (2) Azure Storage

    <Windows Azure Platform 系列文章目录> 注意:本文适用于国内由世纪互联运维的Azure China. 本文将会介绍如何使用REST API来直接访问Storage ...

  4. 文本框只读属性，disabled不能提交

    设置文本框和文本域只读的时候用到disabled="disabled",结果后台获取不到,后来想起这个不会提交,应该用readonly

  5. JS魔法堂：判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  6. 开源服务专题之-------rsync数据备份

    RSYNC是Remote Sync 远程同步的简称,与SCP的比较,SCP= 无法备份大量数据,类似windows的复制,而rsync=边复制 ,边统计,边比较,可以备份大量数据.可以镜像保存整个目录 ...

  7. SQL Server获取下一个编码字符实现继续重构与增强

        我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...

  8. JAVA - JAVA编译运行过程

    Java编译原理 *.java→*.class→机器码 java编译器 (编译) → 虚拟机(解释执行) →  解释器(翻译) → 机器码 1.Java编译过程与c/c++编译过程不同 Java编译程 ...

  9. Winform图片拖拽与缩放

    最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个 ...

  10. 微信开发jssdk入门

    一个项目需要在微信里获得当前位置,于是就开始了我的微信开发之旅... 微信JSSDK说明文档http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9 ...