Html 如何覆盖css样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13117126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to overwrite css style
提问by gadss
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中覆盖它，这会导致原始行为被忽略吗？
回答by Dipak
Using !importantis 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;
}
回答by Mr_Green
instead of overwriting, create it as different css and call it in your element as other css(multiple css).
Something like:
而不是覆盖，将其创建为不同的 css，并将其作为其他 css（多个 css）在您的元素中调用。
就像是：
.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 */
回答by Satish Bellapu
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>
回答by enhzflep
Yes, you can indeed. There are three ways of achieving this that I can think of.
是的，你确实可以。我可以想到三种方法来实现这一点。
- Add inline styles to the elements.
- create and append a new <style> element, and add the text to override this style to it.
- Modify the css rule itself.
- 向元素添加内联样式。
- 创建并附加一个新的 <style> 元素，并添加文本以覆盖此样式。
- 修改css规则本身。
Notes:
笔记：
- is somewhat messy and adds to the parsing the browser needs to do to render.
- perhaps my favourite method
- Not cross-browser, some browsers like it done one way, others a different way, while the remainder just baulk at the idea.
- 有点混乱，并增加了浏览器渲染所需的解析。
- 也许我最喜欢的方法
- 不是跨浏览器，有些浏览器喜欢以一种方式完成，而其他浏览器则以不同的方式完成，而其余的浏览器只是对这个想法犹豫不决。
回答by Vinit
Just add
只需添加
.flex-control-thumbs li {
width: auto;
}
回答by Musa
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>
