css引入方式优先级以及不同选择器的优先级区别
我们都知道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引入方式优先级以及不同选择器的优先级区别的更多相关文章
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- link标签和css引入方式
link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...
- 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性
文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式 各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...
- css引入方式和基本样式
css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- css知多少（6）——选择器的优先级（转）
css知多少(6)——选择器的优先级 1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- css 基础 css引入方式
color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- poj 2031Building a Space Station(几何判断+Kruskal最小生成树)
/* 最小生成树 + 几何判断 Kruskal 球心之间的距离 - 两个球的半径 < 0 则说明是覆盖的!此时的距离按照0计算 */ #include<iostream> #incl ...
- Servlet的四种映射模式
1. 路径匹配模式 <url-pattern>/test/*</url-pattern> 2. 扩展名匹配模式 <url-pattern>*.do</url- ...
- Anliven - 你的学习为何如此低效？！
拖延 适时学习的本质就是营造机会,具有强烈的时效性,而拖延能够毁灭所有机会! 一个得不到执行的完美计划,比不上一次仓促的执行! 盲目 缺少有效的策略和方法,没有弄清基本的问题(需求--->性质- ...
- java实现将汉字转为拼音
有时候为了方便操作程序的开发,需要将汉字转为拼音等操作.下面这个是自己结合网上的资料,加上自己在公司项目中的亲自实践.完整的实现了将汉字转为拼音的操作.这个Demo只是负责将其转换,在main方法中测 ...
- MySql操作时间
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 7天 DAY) <= date(时间字段名) 近30天 DAY) &l ...
- maven基础知识
1.maven基础知识 1.1maven坐标 maven坐标通常用冒号作为分割符来书写,像这样的格式:groupId:artifactId:packaging:version.项目包含了junit3. ...
- UWP开发入门（二十一）——保持Ui线程处于响应状态
GUI的程序有时候会因为等待一个耗时操作完成,导致界面卡死.本篇我们就UWP开发中可能遇到的情况,来讨论如何优化处理. 假设当前存在点击按钮跳转页面的操作,通过按钮打开的新页面,在初始化过程中存在一些 ...
- PHP内核研究(内存管理1)
PHP内存管理 PHP在5.3之前采用的是引用计数法 PHP在5.3之后采用了新的垃圾回收机制 操作系统在申请内存空间的时候回引发系统调用 在操作系统申请内存空间的时候,会将CPU从用户态切换到内核态 ...
- C#多种方式获取文件路径
string str5=Application.StartupPath;//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str1 =Process.GetCurren ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...