[英]how to overwrite css style
I'm developing pages, now in my css style I have this line of code我正在开发页面,现在在我的 css 样式中我有这行代码
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
for my pages.对于我的页面。 Now, some of my pages don't need this line
现在,我的一些页面不需要这一行
width: 25%;
float: left;
It is possible that I can overwrite it in internal css of the page, which will cause the original behaviour to be ignored?有可能我可以在页面的内部css中覆盖它,这会导致原始行为被忽略吗?
Using !important
is not recommended but in this situation I think you should -不推荐使用
!important
但在这种情况下我认为你应该 -
Write this in your internal CSS -在你的内部 CSS 中写下这个 -
.flex-control-thumbs li {
width: auto !important;
float: none !important;
}
instead of overwriting, create it as different css and call it in your element as other css(multiple css).而不是覆盖,将其创建为不同的 css,并将其作为其他 css(多个 css)在您的元素中调用。
Something like:就像是:
.flex-control-thumbs li
{ margin: 0; }
Internal CSS:内部 CSS:
.additional li
{width: 25%; float: left;}
<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */
You can create one more class naming您可以再创建一个类命名
.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}
Add this class whenever you need to override like below,每当您需要像下面这样覆盖时添加这个类,
<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>
And do remove whenever you don't need for other <li>
并且在不需要其他
<li>
时删除
Just add只需添加
.flex-control-thumbs li {
width: auto;
}
Yes, you can indeed.是的,你确实可以。 There are three ways of achieving this that I can think of.
我可以想到三种方法来实现这一点。
Notes:笔记:
You can add your styles in the required page after the external style sheet so they'll cascade and overwrite the first set of rules.您可以在外部样式表之后的所需页面中添加样式,以便它们层叠并覆盖第一组规则。
<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
width: auto;
float: none;
}
</style>
Example:例子:
.parent-class .flex-control-thumbs li {
width: auto;
float: none;
}
Demo:演示:
.sample-class { height: 50px; width: 50px; background: red; } .inner-page .sample-class { background: green; }
<div> <div class="sample-class"></div> </div> <div class="inner-page"> <div class="sample-class"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.