CSS的优先级别

来源：互联网发布：tomcat nginx 编辑：程序博客网时间：2024/05/01 14:46

 <link rel="stylesheet"type="text/css"href="yangshi.css"/><style> a{color:red;font-size:18px}.p1{color:blue;font-size:36px}#o1{color:green;font-size:72px}</style> </head> <body>  <a href="#">dsds</a>  <a href="#"class="p1">dsds</a><!--看出class大于默认的-->  <a href="#"id="o1">dsds</a>  <a href="#"style="color:yellow;font-size:148px">dsds</a>  <!--以上是样式的不同格式，下面比较优先级-->  <a href="#"class="p1"id="o1">dsds</a><!--看出id>class-->  <a href="#"id="o1"style="color:yellow;font-size:148px">dsds</a><!--看出内置样式在以上样式中优先级最大，下面将他们和外部链接的比较--> </body>

显示效果

将

 <link rel="stylesheet"type="text/css"href="yangshi.css"/>

注释掉显示结果和上面的一样。

下面将

<style> a{color:red;font-size:18px}.p1{color:blue;font-size:36px}#o1{color:green;font-size:72px}</style>

注释掉

显示结果

总结就是大体上样式的优先级别是内置style="">id>class>默认>外链接的，对于默认的和外链接的class进行比较，显示的结果为2者皆不是，和id我就不比较了。