I'm developing pages, now in my css style I have this line of code
.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?
Using !important
is not recommended but in this situation I think you should -
Write this in your internal 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).
Something like:
.flex-control-thumbs li
{ margin: 0; }
Internal 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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.