如何在没有类或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;
}

在jsFiddle上的演示。

如何使第三个元素不受CSS样式影响？

- Hamed Kamrava

Answer 1

作为Mihai的回答的替代方案，如果您想在多个元素上使用它，请向任何适当的按钮添加一个class：

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

- Danny Beckett

---

这个解决方案对于IE8和IE7不起作用，因为它们不支持:not选择器。 - jezzipin

我不认为使用http://selectivizr.com/是必要的，这只是为了从一个按钮中删除样式而增加了4.75kb的页面。如果您可以将脚本标签添加到页面中，那么您肯定可以添加一个类或链接到一个js文件，并使用js添加一个类。这样可以为您省下大约5kb的空间。 - iConnor

@Danny 我同意在应用程序中进行微优化并不是一件好事。另一方面，这种优化应该在何时停止呢？我们应该为了方便而建议使用WordPress并添加selectivizr WordPress插件吗？ - Mihai Stancu

在可以通过其他方式实现时，开始添加插件是一个非常糟糕的想法。如果这将用于移动环境呢？ - jezzipin

无论如何，如果插件没有任何实际作用或不能增加功能，那么添加插件都是一个不好的主意。 - jezzipin

Answer 2

滥用OP的措辞：

我们希望在没有任何类或ID的情况下（即：不触及HTML），删除样式（即：已经将样式应用于元素并希望删除它）。

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

这需要一些对默认值的了解，例如：

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

但同时，您需要对其余的CSS进行一些调查，因为您可能已经将重置样式表包含到项目中，告诉所有元素在任何地方都有不同的行为（这通常适用于填充/边距/边框等）。

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

我们可以使用 CSS3 伪选择器 :nth-child() 查找占据父级中第 n 个偏移量的子元素，而不考虑元素类型。

将它们组合起来，我们就得到了：

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

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

尝试使用康纳最新的小提琴版本以获得最高效和优雅性能，或使用他的第一个版本以实现完全兼容。

- Mihai Stancu

---

能否解释一下 nth-child(); 是什么？ - iConnor

nth-child(3) 实际上是引用 HTML 中第三个 <button> 的出现。但需要注意的是，IE8 及以下版本不支持该功能。 - jezzipin

@jezzipin是在鼓励我改进我的回答，而不是为了自己询问更多信息，他知道nth-child是什么（在我看来OP也知道）。 - Mihai Stancu

现在这就是你所说的一篇详细的文章。 - iConnor

正如我所说，我喜欢给出一个有用的答案（基于我认为OP的独立水平和能力）。之后，我会进一步完善我的答案，以造福（未来）其他人。这样我就实现了两个目标：让OP自己思考并努力解决问题，同时也帮助了（未来）其他人。 - Mihai Stancu

Answer 3

我认为没有一种纯粹使用CSS的跨浏览器方法来实现这个功能，除非使用 class 或者 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>

使用这个 CSS。

.no-style{
    display:inline;
}

.container > button {
    background:skyblue;
}

Fiddle

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

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

Fiddle

- iConnor

---

是的，而且你完全可以使用类，感谢@jezzipin。 - iConnor

跨浏览器解决方案将真正帮助那些在不支持的浏览器中进行操作的人们。 - Prasanth K C

@Connor，从我们公司的系统中我可以理解为什么他们可能无法更改原始HTML以使用类，但如果他们处于这种情况，也不太可能实现跨浏览器兼容性。 - jezzipin

我的意思是，他们的HTML可能是由其他东西自动生成的，比如PHP或PL / SQL（在我们的情况下），这意味着他们无法添加新的javascript文件。幸运的是，在这种情况下我认为不是这种情况。 - jezzipin

这是我有时每天都必须处理的问题，尽管我已经在我们的系统中找到了解决方法！ - jezzipin

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>

- Stefan

Answer 5

CSS伪类可能会对你有所帮助。可以从这里获取更多关于nth child伪类的信息。

button:nth-child(3) {

  // Your CSS Here
}

- Prasanth K C

---

请删除注释。这些注释并非用来争论哪个答案基于特定情况更好或更有用。如果你认为一个答案有用或没用，请相应地点赞或踩它。 - animuson