css引⼊⽅式优先级以及不同选择器的优先级区别我们都知道css有3种基本设置⽅式即
1、⾏内也叫嵌⼊式例如：
<div style='background:red'></div>
2、内联式，在html⽂件中⽤style标签包裹着的例如：
css样式表优先级最高<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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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  ⾃然是第⼀个设置的⽣效解决⽅法很简单在第⼆个选择器上改⼀下结果如下
权重值相等后⾯覆盖了前⾯，就是这些了，不⾜错误之请指出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。