时间戳

首页 > 解决方案 > 覆盖 CSS 问题

css - 覆盖 CSS 问题

问题描述

我有一个问题，我想覆盖一些 CSS，但找不到正确的设置来完成我需要的。让我们使用以下内容：

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

我有一些我不喜欢这门课的东西，所以我评论了我不喜欢的东西

.page-link {
  position: relative;
  display: block;
  /* padding: 0.5rem 0.75rem; */
  /* margin-left: -1px; */
  /* line-height: 1.25; */
  /* color: #007bff; */
  /* background-color: #fff; */
  /* border: 1px solid #dee2e6; */
}

很简单，但现在我想将所有更改或覆盖保存在一个单独的文件中。

在我的新文件中复制了这个类，我应该能够改变我不喜欢模仿的东西，就好像原来的被注释掉了一样。但是我似乎无法让它发挥作用。我已经用unset, inherit, initial,revert和其他一些方法尝试过以下操作。我究竟做错了什么？

.page-link {
  padding: unset;
  margin-left: unset;
  line-height: unset;
  color: unset;
  background-color: unset;
  border: unset;
}

编辑：再次声明，当原始值被注释掉时，这将按预期工作。

编辑2：我应该注意到我当前的方法是在我的html中包含原始文件，然后是我的覆盖文件。这是无效的。

<link href="css/original.css" rel="stylesheet"> 
<link href="css/overrides.css" rel="stylesheet">

这就是我的浏览器解释上述内容的方式

在此处输入图像描述

标签： css

解决方案

  1. 您是否在 HTML 文档中引用了新的 CSS 文件？我知道，这似乎是一个愚蠢的问题，但很容易犯这样的小错误。
  2. 如果是这样，您是在原始 CSS 文件之前还是之后引用新的 CSS 文件？它应该紧随其后。
<link rel="stylesheet" href="original.css" />

<link rel="stylesheet" href="new.css" />

推荐阅读