CSS选择器优先级
CSS选择器优先级的结论是:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级
本文将通过具体实验来证明。
标签选择器
- 01
对标签p应用样式,效果图如下:
- 02
新建一个网页a.html,复制粘贴下面的代码: <html> <head> <style type="text/css"> p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>
- 03
说明: 代码中给p标签添加了id和class,但是使用的是标签选择器p设置的样式。
Class类选择器
- 01
对类green应用样式,效果图如下:
- 02
修改a.html的代码,修改后如下: <html> <head> <style type="text/css"> .green { color:green;} p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>
- 03
说明:.green { color:green;} 为类green设置字体颜色为绿色。 从代码中可以看到,.green的设置在先,p的设置在后,但是结果仍然显示的为.green的样式,这说明了类选择器的优先级大于标签选择器。 结论:类选择器优先级 > 标签选择器优先级
id选择器
- 01
对id为p1的标签应用样式,效果图如下:
- 02
修改a.html的代码,修改后如下: <html> <head> <style type="text/css"> #p1 { color:blue;} .green { color:green;} p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>
- 03
说明:#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。 从代码中可以看到,#p1在最前面,但是结果仍然显示的为#p1的样式,这说明了id选择器具有最高优先权。 结论:id选择器优先级 > 类选择器优先级 > 标签选择器优先级