[英]How can I remove a CSS style?
I want remove some style in bootstrap, this is a example: 我想在bootstrap中删除一些样式,这是一个例子:
test.html: 的test.html:
<div class='span1'></div>
bootstrap.css: bootstrap.css:
span1 {
width: 60px;
}
and I want to remove the width
style, and add min-width: 60px
style 我想删除
width
样式,并添加min-width: 60px
样式
I do this: 我这样做:
add test
class in html: 在html中添加
test
类:
<div class='span1 test'></div>
In the css: 在CSS中:
.test{
min-width: 60px;
}
But how can I remove width: 60px
in bootstrap.css
? 但是如何在
bootstrap.css
删除width: 60px
?
You can reset the width using auto
: 您可以使用
auto
重置宽度:
.test{
width: auto;
min-width: 60px;
}
Working example: 工作范例:
span { width: 100px; background-color: red; } span.test { width: auto; min-width: 60px; }
<span class="test"> span! </span>
None of the previous answers really resets a previous CSS rule... They just add a new one (when the width is set to auto
or inherit
, a different rule is created: the former property adjusts, the latter uses the parent's element as reference), and span
is not the best element to understand why the width is not affected (check the answer to "Question 2" to understand why) . 之前的答案都没有真正重置以前的CSS规则......它们只是添加一个新规则(当宽度设置为
auto
或inherit
,会创建一个不同的规则:前一个属性调整,后者使用父元素作为参考),并且span
不是理解为什么宽度不受影响的最佳元素(检查“问题2”的答案以理解原因) 。
Here is the proof using both p
and span
( "inline non-replaced elements" like span " the width
property does not apply " ): 这是使用
p
和span
的证明( “内联非替换元素”,如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>
However, after rereading the question, there is no mention of a span
element. 但是,在重新阅读问题之后, 没有提到
span
元素。 What nataila refers instead is a class="span1"
in a div
element defined in bootstrap.css . nataila所指的是bootstrap.css中定义的
div
元素中的class="span1"
。 Therefore, answering the question: 因此,回答问题:
how can I remove
width: 60px
in bootstrap.css ?如何在bootstrap.css中删除
width: 60px
?
You can do this by: 你可以这样做:
.span1.test{width:auto}
); .span1.test{width:auto}
); .span1
after calling/invoking bootstrap.css ( .span1{width:auto}
). .span1{width:auto}
)之后重新定义.span1
。 The auto
property will adjust the element to the surrounding context , thus in this case the width
will be extended in order to use the entire space available of the #container
: 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>
Notice the other rules are applied due to specificity or due to precedence, and if min-width: 60px
is defined and width
is under 60px, the element will remain with 60px! 请注意,由于特异性或由于优先级而应用其他规则,如果定义了
min-width: 60px
且width
小于60px,则元素将保持60px!
You should be able to reset width by assigning inherit
value: 您应该能够通过分配
inherit
值来重置宽度:
.test {
width: inherit;
min-width: 60px;
}
.test{
min-width: 60px;
width:auto;
}
Should work like charm :) 应该像魅力一样工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.