[分享]css内部还是外部优先级大

发布于 2024-11-11 15:27:10

CSS作为前端开发的必学技能之一，考虑到其内部还是外部优先级大的问题一直备受关注。所谓内部优先级，指的是CSS代码直接写在HTML文档中的样式，称为内嵌样式表。而外部优先级则是指在HTML文件外部使用...

CSS作为前端开发的必学技能之一，考虑到其内部还是外部优先级大的问题一直备受关注。

所谓内部优先级，指的是CSS代码直接写在HTML文档中的样式，称为内嵌样式表。而外部优先级则是指在HTML文件外部使用的链接样式表。他们都可以控制文档的样式。

那么，哪种优先级更大呢？

<div style="background-color: #f0f0f0; padding: 10px;">  <html>
    <head>
      <style>
        p {
          color: red;
        }
      </style>
    </head>
    <body>
      <style>
        p {
          color: blue;
        }
      </style>

      <p>这是测试文本</p>
      
    </body>
    </html> </div>

如上述代码所示，出现在HTML文档头部的样式表，意味着它们比出现在文档底部或外部链接样式表里的样式表权重更大。所以，内部优先级大于外部优先级。

如果在内部样式与外部样式中，都有针对一个类的声明，那么内部样式的声明将覆盖外部样式的声明。如果两个选择器都是内部样式，那么后者将覆盖前者。

<div style="background-color: #f0f0f0; padding: 10px;">  <html>
    <head>
      <style>
        p {
          color: red;
        }
      </style>
    </head>
    <body>
      <style>
        p {
          color: blue;
        }
      </style>

      <p style="color:green;">这是测试文本</p>
      
    </body>
    </html> </div>

如上述代码所示，红色的文字声明被覆盖了，因为内部声明优先于外部声明，最终的文字颜色是绿色。

总之，当CSS代码同时出现在多个地方，标准的优先级是：内联样式>内部样式>外部样式。但是，在实际工作中，最好的做法是使用ID和类更明确，并避免多余的声明。

css 教程