4

クラスやIDのない5つのボタンがあります。これが私のコードです：

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 のデモ。

3番目の要素がCSSスタイルを取得しないようにするにはどうすればよいですか?

4

5 に答える 5

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

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 に答える