HTML中常见的选择器及其优先级
在HTML中常见选择器有：
⾏内选择器、标签选择器、id选择器、类选择器（class）
内联样式
内联样式通过style将样式直接写在标签⾥⾯；
格式为：style=“属性1：属性值1；属性2：属性值2；…”
例如：
<div ></div>
⾏内选择器⽐较少⽤，原因是⽐较繁琐，代码⽐较少的时候可以考虑使⽤，但是代码⼀多，就会导致看着很乱。标签选择器
标签选择器就是利⽤标签名通过内部样式将标签+样式给表现出来；
格式为：标签{ 样式1；样式2；…}
例如：
<style>
div{color:Red;}
</style>
使⽤标签选择器进⾏样式设置将会改变该标签下的所有格式。
ID选择器
ID选择器在标签内定义⼀个id=“idname”，在内部样式中使⽤ #idname{样式} 的⽅式使⽤id选择器。
例如：
<html>
<head>
<title>id选择器</title>
<style type="text/css">
#p1{
color:blue;
font-size:18px;
}
</style>
</head>
<body>
<p id="p1"> 这是⼀段测试⽂本</p>
</body>
</html>
类选择器（class）
类选择器在标签内定义⼀个class=“classname”，在内部样式中使⽤ .classname{样式} 的⽅式使⽤id选择器。
例如：
<html>
<head>
<title>类选择器</title>
<style type="text/css">
.pclass{
color:blue;
font-size:18px;
}
</style>
</head>
<body>
<p class="pclass"> 这是⼀段测试⽂本</p>
</body>
</html>
优先级
在css的优先规则中，优先级关系：内联样式 > ID 选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML选择器的优先级</title>
<style type="text/css">
p{
color: green;/*绿⾊*/
}
.blue{
color: blue;/*蓝⾊*/
}
#red{
color: red;/*红⾊*/
}
</style>
</head>
<body>
<h3>望庐⼭瀑布</h3>
<p >⽇照⾹炉⽣紫烟，</p>
<p class="blue">遥看瀑布挂前川。</p>
<p class="blue" id="red">飞流直下三千尺，</p>
css样式表优先级最高<p class="blue" id="red" >疑是银河落九天。</p>
</body>
</html>
效果如图：
从第⼀句到第四句可以很清楚的看到优先的变化是按照
⾏内样式（最⾼级）>id选择器>类选择器>标签选择器来变化的
Tip：属性后插有 !important 的属性拥有最⾼优先级，当搞不清楚优先级时，可以通过在属性的后头加⼊!important 来将该属性提到最⾼优先级。
错误的说法
  在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当⼀个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再⽐较权值。这种说法其实是有问题的。⽐如⼀个由 11 个类选择器组成的选择器和⼀个由 1 个 ID 选择器组成的选择器指向同⼀个标签，按理说 110 > 100，应该应⽤前者的样式，然⽽事实是应⽤后者的样式。错误的原因是：权重的进制是并不是⼗进制，CSS 权重进制在 IE6 为 256，后来扩⼤到了 65536，现代浏览器则采⽤更⼤的数量。。还是拿刚刚的例⼦说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过100，你可以理解为 99.99，所以最终应⽤后者样式。

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