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选择器优先级 > 类选择器优先级 > 标签选择器优先级