如何移除CSS样式？

Question

我想要在Bootstrap中移除一些样式，这是一个例子：

test.html:

<div class='span1'></div>

bootstrap.css:

span1 {
  width: 60px; 
}

我想移除“width”样式，并添加“min-width: 60px”样式。

我这样做：

在HTML中添加“test”类：

<div class='span1 test'></div>

在 CSS 中：

.test{
  min-width: 60px;
}

“但是我如何在bootstrap.css中删除width: 60px？”

- nataila

Answer 1

您可以使用auto重置宽度：

.test{
  width: auto;
  min-width: 60px;
}

工作示例：

span {
  width: 100px;
  background-color: red;
}

span.test {
  width: auto;
  min-width: 60px;
}

<span class="test">
  span!
</span>

- DavidG

Answer 2

之前的回答都没有真正重置以前的CSS规则...它们只是添加了一个新的规则（当宽度设置为auto或inherit时，会创建一个不同的规则：前者属性会调整，后者使用父元素作为参考），而span不是最好的元素（查看“问题2”的答案以了解原因）来理解为什么宽度不受影响。

这里是使用p和span两个元素进行证明（像width属性不适用这样的“内联非替换元素”）：

p, span {
  width: 100px;
  background-color: red;
  color:white;
}
p.test-empty {
  width: '';
  min-width: 60px;
}
p.test-auto {
  width: auto;
  min-width: 60px;
}
p.test-inherit {
  width: inherit;
  min-width: 60px;
}

<p>
  p without classes EXAMPLE
</p>
<p class="test-auto">p -> width: auto EXAMPLE</p>
<p class="test-inherit">p -> width: inherit EXAMPLE</p>
<span>span without classes EXAMPLE</span>
<br>
<span class="test-auto">span -> width: auto EXAMPLE</span>
<br><span class="test-inherit">span -> width: inherit EXAMPLE</span>

然而，在重新阅读问题后，并没有提到元素。Nataila所指的是在bootstrap.css中定义的

元素中的class="span1"。因此，回答这个问题：

如何在bootstrap.css中删除width: 60px？

你可以通过以下方式实现：

• 定义一个比bootstrap.css规则更具体的新CSS规则（例如：.span1.test{width:auto}）；
• 或者在调用/调用bootstrap.css之后重新定义.span1（.span1{width:auto}）。

auto属性将调整元素以适应周围的上下文，因此在这种情况下，width将被扩展以使用#container的整个可用空间：

div:not(#container) {background-color: red;color: white;margin-bottom: 5px;font-size:11px}
#container {width: 500px}
.test-350 {width: 90px;min-width: 60px}
.span1.test-150-specific {width: 100px;min-width: 60px}
/* from bootstrap.css */
.span1 {width: 60px}
.test-210 {width: 110px;min-width: 60px}
.test-0 {width: 0;min-width: 60px}
.test-auto {width: auto;min-width: 60px}
.test-inherit {width: inherit;min-width: 60px}

<div id="container">
  <div class="span1">
    Bootstrap.css default span1
  </div>
  <div class="span1 test-auto">
    width: auto EXAMPLE
  </div>
  <div class="span1 test-inherit">
    width: inherit EXAMPLE
  </div>
  <div class="span1 test-0">
    .test-0 is defined with width:0 but, due to min-width, it actually has width=60px
  </div>
  <div class="span1 test-150-specific">
    .test-150-specific is defined together with .span1, thus width=150px
  </div>
  <div class="span1 test-210">
    .test-210 is defined after .span1, thus width=210px
  </div>
  <div class="span1 test-350">
    .test-350 is defined before .span1, which means it will get span1's width, thus width=60px
  </div>
</div>

请注意，其他规则是由于特定性或优先级而应用的。如果定义了min-width: 60px并且width小于60px，则该元素将保持为60px！

- Armfoot

Answer 3

您可以通过分配 inherit 值来重置宽度：

.test {
  width: inherit;
  min-width: 60px;
}

- dfsq

Answer 4

.test{
  min-width: 60px;
  width:auto;
}

应该像魔术般运行 :)

- Direkts