4

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

4

5 回答 5

13

作为 Mihai 答案的替代方案，如果您希望能够在多个元素上使用它，请将 a 添加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>

于 2013-07-05T10:02:30.730 回答
4

滥用 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 最后的小提琴以获得最高效和优雅的效果，或者他的第一个小提琴以获得完全的兼容性。

于 2013-07-05T10:01:47.263 回答
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;
}

小提琴

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

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

小提琴

于 2013-07-05T10:24:32.750 回答
2

CSS 伪类可以帮助你。更多关于第 n 个子伪类的信息可以从点击这里获得

button:nth-child(3) {

  // Your CSS Here
}
于 2013-07-05T10:08:35.923 回答
2

如果您无法更改 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>
于 2013-07-05T10:06:44.557 回答