如何删除没有Class或ID的元素的所有CSS样式？

Question

我有5个按钮没有任何类或ID。这是我的代码：

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

button {
    width: 100px;
    height: 45px;
    background-color: #12aeef;
    border: none;
    box-shadow: 0px 5px 3px #888888;
}

Demo on jsFiddle

如何让第3个元素不能获得CSS样式？

Answer 1

作为Mihai答案的替代方案，如果您希望能够在多个元素上使用它，请将class添加到任何适当的button：

<button class="nostyle">

然后在您的CSS中，只需将button更改为button:not(.nostyle)。

就是这样！ ......什么，你期待更多的工作？

这是更新后的代码：

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>

Answer 2

滥用OP'措辞：

我们希望删除样式（即：样式已经应用于元素，我们希望它被删除），没有任何类或ID（即：不得触摸HTML）。

首先，我们如何“重置”一些元素已经继承的CSS属性？

这需要一些默认值的知识，例如：

width: auto; // the default for sizes is auto

但也有一些关于你的css其余内容的调查，因为你的项目中可能包含一些重置样式表，它告诉所有元素到处都有不同的行为（这通常适用于填充/边距/边框等）。

现在我们知道如何“重置”CSS属性，我们需要识别我们应用此“重置”的元素。

我们可以使用:nth-child()，这是一个CSS3伪选择器，可以找到子元素，这些子元素在父元素中与第n个偏移量相关，而不管元素类型如何。

把它放在一起，我们有：

button:nth-child(3) {
    width: auto;
    height: auto;
    background: none;
    /* ... */
}

忽略OP的措辞，但提供更好的解决方案：

尝试Connors最后一个小提琴，以获得最高效率和优雅，或者他的第一个完全兼容。

Answer 3

我认为在没有class或id的css中有一种跨浏览器方式可以做到这一点所以对于跨浏览器兼容性你可以做这样的事情

<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>

使用此 CSS

.no-style{
    display:inline;
}

.container > button {
    background:skyblue;
}

Fiddle

但如果您不担心浏览器兼容性，可以使用

button:not(:nth-child(3)){
   background:skyblue;
}

Fiddle

Answer 4

如果你不能改变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>

Answer 5

CSS伪类可能对您有所帮助。有关第n个子伪类的更多信息可以从Click Here

获得

button:nth-child(3) {

  // Your CSS Here
}