CSS的优先顺序是什么？

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图弄清楚为什么我的一个css类似乎覆盖了另一个（而不是相反）

这里我有两个CSS类

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}
.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

在我看来，我打电话给

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">

字体（重叠元素）显示为10px而不是20px-有人可以解释为什么会这样吗？

回答：

有几条规则（按此顺序应用）：

  1. 内联css（html样式属性）覆盖样式标签和css文件中的css规则

  2. 较具体的选择器优先于较不具体的选择器

  3. 如果两个规则具有相同的特异性，则稍后出现在代码中的规则将覆盖先前的规则。

  4. 具有的css规则!important始终优先。

在您的情况下，其规则3适用。

单个选择器从最高到最低的特异性：

  • id（例如：#mainselects <div id="main">）

  • 类（例如：.myclass），属性选择器（例如：[href=^https:]）和伪类（例如：:hover）

  • 元件（例如：div）和伪元素（例如：::before）

要比较两个组合选择器的特异性，请比较上述每个特异性组中单个选择器的出现次数。

例如：比较#nav ul li a:hover来#nav ul li.active a::after

  • 计算ID选择器的数量：每个（#nav）都有一个

  • 计算类选择器的数量：每个（:hover和.active）都有一个

  • 计算元素选择器的数量：第一个有3 ul li a个（ul li a ::after），第二个有4个（），因此第二个组合选择器更加具体。

以上是 CSS的优先顺序是什么？ 的全部内容， 来源链接： utcz.com/qa/414415.html

回到顶部