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

我有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样式？

滥用OP的措辞： 我们希望在没有任何类或ID的情况下删除样式（即：样式已应用于元素，我们希望将其删除）（即：不得触摸HTML）

首先也是最重要的是，我们如何“重置”元素已经继承的一些CSS属性？ 这需要了解一些默认设置，例如：

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

但也需要对css的其余部分进行一些调查，因为您的项目中可能包含一些重置样式表，它告诉所有元素的行为都不同（这通常适用于填充/边距/边框等）

既然我们知道了如何“重置”CSS属性，那么我们需要识别应用此“重置”的元素。 我们可以使用

：nth-child（）

，这是一个CSS3伪选择器，用于查找在父元素中复制第n个偏移量的子元素，而不考虑元素类型

综合起来，我们有： 忽略OP的措辞，但提供更好的解决方案：

---

尝试Connors last fiddle以获得最高效和最优雅的效果，或者尝试Connors fiddle fiddle以获得完全的兼容性。

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

按钮上添加
类
：

<button class="nostyle">

Btn1
Btn2
Btn3
Btn4
Btn5
如果无法更改HTML或CSS样式表，可以尝试此jQuery（未测试）：


变量按钮=$（“按钮”）；
变量样式={'width'：'auto'，'height'：'auto'，'background'：'none'，'box shadow'：'''''}；
按钮[2]。css（样式）；
CSS伪CLSS可能会对您有所帮助。有关第n个子伪类的更多信息，请访问

我认为在没有
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>

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

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

注意解释什么是
n-child（）是吗？第n个子项（3）基本上引用了html中第三个出现的。同样，IE8及以下版本也不支持这一点。@jezzipin他鼓励我加强我的回答，而不是为他自己要求更多信息，他知道N个孩子做什么（IMHO也做OP）。好了，现在这就是你所说的详细的帖子。我说，我想给出一个有用的答案（基于我认为OP的独立水平和能力）。后来，为了（未来）其他人的利益，我喜欢增强我的答案。通过这种方式，我实现了两个目标：让OP工作/为它思考，以及帮助（未来）其他人。此解决方案不适用于IE8和IE7，因为它们不支持：not选择器。我不认为真的有必要在页面中添加4.75kb，只为了从一个按钮中删除样式。如果您可以将该脚本标记添加到页面，那么您当然可以添加一个类或链接到js文件，并使用js添加一个类。那会救你的5kb@Connor也许什么时候，这可能是个问题。我同意应用程序内部的微优化不是一件好事。另一方面，它停在哪里？为了方便起见，我们是否应该建议使用WordPress并添加一个selectivizr WordPress插件？如果可以通过其他方式实现，那么开始添加插件是一个非常糟糕的主意。如果在移动环境中使用它会怎么样？这是最好的解决方案，尤其是当你与公司用户打交道时，他们中的大多数仍然使用IE8（有些甚至使用IE&still）。虽然您可以使用javascript或jquery来选择第三个按钮，并对其应用一些css。是的，而且您没有理由不能使用类，感谢@jezzipinCross浏览器解决方案将真正帮助人们绕过不受支持的浏览器。@Connor我可以从我们自己的公司系统中理解为什么他们可能无法更改原始html以使用类，但如果他们处于这种情况，他们也不太可能实现跨浏览器兼容性。如果他们不能向html添加类，那么肯定可以使用
Element.className+='no style'如果不是，则为css3。这里的评论不是为了根据每个答案的具体情况来争论哪个答案更好或更有用。如果你发现一个答案是有用的或没用的，就相应地投赞成票或反对票。
<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>

button:nth-child(3) {

  // Your CSS Here
}

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

.no-style{
    display:inline;
}

.container > button {
    background:skyblue;
}

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