我们都知道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. c++ ofstream & ifstream文件流操作

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; //ofstream & ifstream inherit from istream class ...

  2. Unity3d 脚本基础 思维导图

    盘点下Unity的脚本知识.

  3. [python]进阶学习之阅读代码

    起因 最近在公司的任务是写一些简单的运营工具,因为是很小的工具,所以就用了github上面的一个开源项目flask-admin,可以省去很多的事情. 但是,这个开源项目是个人维护的项目,所以文档相对简 ...

  4. UMeditor宽度自适应

    百度编辑器UMeditor,生成富文本编辑框以后,改变窗口大小会出现横向滚动条,即使你调用接口设置了编辑器的宽度为100%.如: var um = UM.getEditor('<%=txtCon ...

  5. JAVA 设计模式 享元模式

    用途 享元模式 (Flyweight) 运用共享技术有效地支持大量细粒度的对象. 享元模式是一种结构型模式. 结构

  6. BZOJ1179 Atm //缩点＋spfa

    1179: [Apio2009]Atm Description Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的 ...

  7. SQL--空值处理

    --为空 SELECT * FROM dbo.Product WHERE Price IS NULL --不为空 SELECT * FROM dbo.Product WHERE Price IS NO ...

  8. c#中如何执行存储过程

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. jquery_layout

    http://layout.jquery-dev.com/documentation.cfm

  10. iOS 阶段学习第11天笔记（OC基础知识）

    iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import  用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...