[分享]css内联样式与内部样式优先级

发布于 2024-11-11 15:34:30

在CSS中，有三种样式表：内联样式、内部样式和外部样式。它们的优先级也是按照这个顺序依次递减的，即内联样式的优先级最高，外部样式的优先级最低。接下来我们来详细探讨内联样式与内部样式的优先级。内联样式内...

在CSS中，有三种样式表：内联样式、内部样式和外部样式。它们的优先级也是按照这个顺序依次递减的，即内联样式的优先级最高，外部样式的优先级最低。接下来我们来详细探讨内联样式与内部样式的优先级。

内联样式是指直接在HTML标签中使用样式属性，如下所示：

<p style="color: blue;">这是一个内联样式的段落</p>

内联样式可以直接作用于HTML元素，且权重最高，可以覆盖其他样式。因此，如果同时设置了内联样式和外部/内部样式，并且内联样式与另一个样式发生了冲突，那么内联样式会覆盖另一个样式。

内部样式表是指将CSS样式写在HTML文档中的<style>标签内，如下所示：

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>
<body>
  <p>这是一个内部样式的段落</p>
</body>

内部样式是写在<head>标签内，在HTML文件加载后首先被解释并且紧跟着的内联样式之后被作用。因此，如果内部样式与内联样式发生了冲突，那么内联样式会覆盖内部样式。

总结一下内联样式与内部样式的优先级关系：

那么，如何计算样式的优先级？CSS计算方式为：权值越大的样式优先级越高，如果权值相等，则样式表出现的后面加载的优先级高。

样式表的权值由选择器的组成决定。我们可以用下面的公式来计算样式的权值：

内联样式：1000
id选择器：100
class选择器/属性选择器/伪类选择器：10
标签选择器/伪元素选择器：1
通用选择器(*)和继承：0

例如：

样式一：p {color: red;}     /* 权值为：1 */
样式二：.example {color: blue;}  /* 权值为：10 */
样式三：#title {color: green;}  /* 权值为：100 */

如果我们将这三种样式同时应用到同一个元素，那么权值最高的样式就会被应用，即样式三。

综上所述，当我们编写CSS时，应尽可能避免使用内联样式，而尽量采用外部样式表或内部样式表，以便更好地管理和维护CSS样式。同时也要注意选择器的权值，避免样式之间发生冲突。

一个月内的热帖推荐