HTML中常见的选择器 的优先级

来源:转载

在HTML中常见选择器有:
行内选择器、标签选择器、id选择器、类选择器(class)

行内选择器:通过style将样式直接写在标签里面:
格式为:style=“属性1:属性值1;属性2:属性值2;…”
例如:<p style=”color: red;font-size: 32px;”>啊啊啊啊</p>
注意:最后一个属性值后面的分号可以省略,其他的属性与属性之间必须要有分号分开;现在行内选择器也比较少用,原因是比较繁琐,代码比较少可以考虑使用,但是代码一多,就很不好用了

标签选择器:就是利用标签名通过内部样式将标签+样式给表现出来;
格式:标签{ 样式1;样式2;…}
例如:

<html><head> <title>标签选择器</title> <style type="text/css"> p{ color:green; font-size:14px; } </style></head><body> <p>啊啊啊</p></body></html>

注意:标签选择器:运用范围是:标签的样式是同一格式的范围情况下,比较适用,但在同一标签多种样式的情况下不适合适用;

id选择器:在标签内定义一个id=“idname”,在内部样式中使用:#idname{样式}的方式使用id选择器。

类选择器(class):在标签内定义一个class=“classname”,在内部样式中使用: .classname{样式}的方式使用id选择器。

行内样式:写在标签里面通过style=“属性1:属性值1;….”的方式改变标签样式;例如

<p style="color:red">啊啊啊</p>

优先级:
**id选择器>标签选择器
行内样式>id选择器
类选择器>标签选择器
id选择器>类选择器

行内样式(最高级)>id选择器>类选择器>标签选择器
**
例子:
类选择器与标签选择器的优先级:

<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> <p class="blue" id="red" style="color: black;">疑是银河落九天。</p> </body></html>

如图

从第一句到第四句可以很清楚的看到优先的变化是按照
行内样式(最高级)>id选择器>类选择器>标签选择器来变化的

分享给朋友:
您可能感兴趣的文章:
随机阅读: