时间戳

首页 > 解决方案 > CSS - 为什么 CSS 中的规则顺序会影响计算值

css - CSS - 为什么 CSS 中的规则顺序会影响计算值

问题描述

假设我有这样的代码：

<html>
<head>
  <style>
    div {
      background: yellow;
    }
    .px-0 {
      padding-left: 0;
      padding-right: 0;
    }
    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  </style>
</head>
  <body>
    <div class="px-10 px-0">
      text that should have 0 padding
    </div>
  </body>
</html>

我的问题是 - 为什么 div 的填充不是 0？我一直认为应该根据使用的类的顺序应用规则——在这种情况下，有px-10（有填充），然后px-0有（没有填充），所以最终结果应该是没有填充。

在这种情况下，CSS 中定义的规则顺序似乎也很重要 - 当我在此.px-10之前放置.px-0结果与预期的一样（但当然在使用时会导致问题class="px-0 px-10"）。

以防万一上面的代码只是简化为我所拥有的场景 - 使用Tailwind CSS并且我有一些设置了px-10类的组件（假设我无法删除它）并且我很确定px-0在它之后添加也会导致元素不会有任何填充但似乎我错了。

附加问题 - 唯一可能的解决方案是编写额外的 CSS，如下所示：

.px-10.px-0 {
  padding-left: 0;
  padding-right: 0;
}

让它工作？

标签： csstailwind-css

解决方案

有两件事对 CSS 很重要

第一：Css 总是从上到下运行，不管你给类的顺序是什么。

它可以是<div class="px-10 px-0">OR <div class="px-0 px-10">。没关系。

正如你给two你的diviepx-0和px-10

.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

px-10正如您在最底部看到的渲染，它将渲染最后一个值。

如果你看这段代码：

div {
  padding:0;
  background: yellow;
}

.px-10 {
  background-color:purple;
  padding-left: 10rem;
  padding-right: 2.5rem;
}
.px-0 {
  padding-left:0;
  padding-right:0;

这将为您的div渲染0 padding，因为它px-0位于底部并且也purple为.divdivpurplebackground-color propertypurpledivyellow

第二：CSS查看定义的属性是否重要！

如果您定义一个特定的属性!important 

.px-10 {
  background-color:purple;
  padding-left: 5rem !important;   <--- Important one
  padding-right: 2.5rem;
}
.px-0 {
  padding-left:0;
  padding-right:0;
}

如果您padding-left:5rem !important;输入，那么无论是否在最底部定义了属性， px-10css 都会渲染该属性，它将被视为重要属性。padding-left:5rempx-0

为了回答你的问题

正如您所提到的，您在px-0之后给予，px-10但向左填充和向右填充不为零，因为它们不在 CSS 文件的最底部。 

<html>
<head>
  <style>
    div {
      background: yellow;
    }
    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
    .px-0 {
      padding-left: 0;
      padding-right: 0;
    }
  </style>
</head>
  <body>
    <div class="px-10 px-0">
      text that should have 0 padding
    </div>
  </body>
</html>

推荐阅读