Html 如何删除没有 Class 或 ID 的元素的所有 CSS 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17486075/
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 do I remove all CSS styles for an element without a Class or ID?
提问by Hamed Kamrava
I have 5 buttons withoutany Class or ID. Here's my code:
我有 5 个按钮，没有任何类或 ID。这是我的代码：
HTML
HTML
<button>Btn1</button>
<button>Btn2</button>
<button>Btn3</button> <!-- I don't want this elem to get the CSS styles -->
<button>Btn4</button>
<button>Btn5</button>
CSS
CSS
button {
width: 100px;
height: 45px;
background-color: #12aeef;
border: none;
box-shadow: 0px 5px 3px #888888;
}
How can I make the 3rd element not get the CSS styles?
如何让第三个元素没有获得 CSS 样式？
回答by Danny Beckett
As an alternative to Mihai's answer, if you'd like to be able to use it on more than element, add a classto any appropriate button:
作为 Mihai 答案的替代方案，如果您希望能够在多个元素上使用它，请将 a 添加class到任何适当的button：
<button class="nostyle">
Then in your CSS, simply change buttonto button:not(.nostyle).
然后在您的 CSS 中，只需更改button为button:not(.nostyle).
That's it! ...what, you were expecting more work?
就是这样！...什么，你期待更多的工作？
Here's the updated code:
这是更新后的代码：
button:not(.nostyle) {
width: 100px;
height: 45px;
background-color: #12aeef;
border: none;
box-shadow: 0px 5px 3px #888888;
}<button>Btn1</button>
<button>Btn2</button>
<button class="nostyle">Btn3</button>
<button>Btn4</button>
<button>Btn5</button>回答by Mihai Stancu
Abusing OP' wording:
滥用 OP 的措辞：
We want to remove styling(i.e.: the styling was already applied to the element and we want it removed) without any Classes or ID (i.e.: HTML must not be touched).
我们想要删除没有任何类或 ID 的样式（即：样式已经应用于元素并且我们希望将其删除）（即：不得触及 HTML）。
First and foremost how do we "reset" some CSS properties that have already been inherited by an element?
首先，我们如何“重置”一些已经被元素继承的 CSS 属性？
This requires some knowledge of the defaults ex.:
这需要了解一些默认值，例如：
width: auto; // the default for sizes is auto
But also some investigation regarding the rest of your css because you may have some reset stylesheet included into your project which tells all elements everywhere to have behave diferently (this usually applies to paddings / margins / borders etc.).
但也要对 css 的其余部分进行一些调查，因为您的项目中可能包含一些重置样式表，它告诉所有元素到处都有不同的行为（这通常适用于填充/边距/边框等）。
Now that we know how to "reset" the CSS properties we need to identify the element to which we apply this "reset".
现在我们知道如何“重置”CSS 属性，我们需要确定我们应用此“重置”的元素。
We can use :nth-child(), a CSS3 pseudo selector that finds child elements which ocupy the nth offset within the parent regardless of element type.
我们可以使用:nth-child()一个 CSS3 伪选择器来查找在父元素中占据第 n 个偏移量的子元素，而不管元素类型如何。
Put it together and we have:
把它放在一起，我们有：
button:nth-child(3) {
width: auto;
height: auto;
background: none;
/* ... */
}
Ignoring OP' wording but offering a better solution:
忽略 OP 的措辞，但提供更好的解决方案：
Try Connors last fiddle for the most efficience and elegance, or his first for full compatibility.
尝试 Connors 的最后一个小提琴以获得最高效和优雅的效果，或者他的第一个小提琴以获得完全兼容性。
回答by iConnor
i don't think there is a cross browser way to do this in css without classor idso For Cross Browser Compatability you can do something like this
我不认为这是一个跨浏览器的方式没有做到这一点在CSSclass或id因此对于跨浏览器的兼容性，你可以做这样的事情
<div class="container">
<button>text 1</button>
<button>text 2</button>
<div class="no-style">
<button>text 3</button>
</div>
<button>text 4</button>
<button>text 5</button>
</div>
with this CSS
使用这个CSS
.no-style{
display:inline;
}
.container > button {
background:skyblue;
}
Fiddle
小提琴
But if your not worried about browser compatability you can use
但是如果您不担心浏览器兼容性，您可以使用
button:not(:nth-child(3)){
background:skyblue;
}
Fiddle
小提琴
回答by Stefan
If you cannot change the HTML or the CSS stylesheet, you can try this jQuery (untested):
如果你不能改变 HTML 或 CSS 样式表，你可以试试这个 jQuery（未经测试）：
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
var buttons = $('button');
var styles = {'width': 'auto', 'height': 'auto', 'background': 'none', 'box-shadow': ''};
buttons[2].css(styles);
</script>
回答by Prasanth K C
CSS pseudo clsses may help you. More info on nth child pseudo class can be obtained from Click Here
CSS 伪类可能会对您有所帮助。有关第 n 个子伪类的更多信息可以从单击此处获得
button:nth-child(3) {
// Your CSS Here
}
