Wie Entferne ich alle CSS-Stile für ein element ohne Klasse oder ID?

Ich habe 5 buttons ohne jede Klasse oder ID. Hier ist mein code:

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 auf jsFiddle.

Wie kann ich das 3. element nicht die CSS-Stile?

InformationsquelleAutor Hamed Kamrava | 2013-07-05

  1. 4

    Missbrauchen OP' Wortlaut:

    Wollen wir entfernen styling (d.h.: das styling wurde bereits auf das element angewendet, und wir wollen, dass es entfernt wurde) ohne Klassen-oder ID (z.B.: HTML muss nicht berührt werden).

    Zuerst und vor allem, wie tun wir "reset" einige CSS-Eigenschaften, die bereits vererbt worden, die von einem element?

    Dies erfordert einige Kenntnisse von den Standardeinstellungen ab.:

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

    Aber auch einige Untersuchungen über den rest der css, da kannst du einige reset-Stylesheets in Ihrem Projekt erzählt, die alle Elemente überall zu haben, Verhalten sich diferently (dies gilt in der Regel für Polster /Ränder /Grenzen etc.).

    Jetzt, da wir wissen, wie man "zurücksetzen" werden die CSS-Eigenschaften müssen wir identifizieren das element, auf das wir anwenden, dieser "reset".

    Wir können :nth-child(), CSS3 pseudo-Selektor, der Sie findet, child-Elemente, die Messe der nth-offset innerhalb der Eltern-unabhängig vom element-Typ.

    Legte es zusammen und wir haben:

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

    Ignorieren von OP' - Formulierung, sondern Sie bietet eine bessere Lösung:

    Versuchen Connors Letzte Geige für die Effizienz und Eleganz, oder seine ersten für volle Kompatibilität.

    darauf zu erklären, was nth-child(); ist?
    Der nth-child(3) im wesentlichen verweist das Dritte vorkommen von <button> in html. Auch dies ist nicht unterstützt, IE8 und unten.
    ermutigte er mich zu verbessern, meine Antwort nicht zu Fragen, für mehr Infos für sich selbst, er weiß, was das N-te Kind (IMHO also nicht OP).
    Nun das ist, was Sie nennen, eine detaillierte post
    Wie gesagt, ich gebe gerne eine nützliche Antwort (basierend auf was ich denke, dass OP' Unabhängigkeit Ebene und Fähigkeiten). Später auf ich mag zu verbessern meine Antwort zugunsten der (zukünftigen) anderen. So, wie ich das erreichen beider Ziele: die OP-arbeiten / denken, für die es ebenso wie bei der (zukünftigen) anderen.

    InformationsquelleAutor Mihai Stancu

  2. 3

    ich glaube nicht, dass es eine cross-browser-Möglichkeit in css ohne class oder id so Für Cross-Browser-Kompatibilität Sie können so etwas wie dies tun 

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

    mit diesem CSS

    .no-style{
    display:inline;
}

.container > button {
    background:skyblue;
}

    Fiddle

    Aber wenn Ihr keine Gedanken über browser-Kompatibilität können Sie 

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

    Fiddle

    +1 Sehr nützlich. Danke
    Dies ist die beste Lösung, vor allem, wenn Sie Umgang mit Geschäftskunden, von denen die meisten noch mit IE8 (einige werden sogar mit IE& immer noch). Allerdings könntest du mit javascript oder jquery zu wählen, das Dritte vorkommen von button und verwenden Sie einige css.
    Ja, plus es sollte keinen Grund, warum Sie nicht verwenden Sie eine Klasse, danke @jezzipin
    Cross-Browser-Lösung wird wirklich helfen, die Menschen spielt, um nicht unterstützte Browser.
    Ich kann verstehen, aus unserem eigenen system der Firma, warum Sie möglicherweise nicht in der Lage zu ändern, Ihre original-html-Format zur Verwendung einer Klasse, aber dann wieder, wenn Sie in dieser situation sind ist es auch unwahrscheinlich, dass Sie in der Lage sein zu erreichen, cross-browser-Kompatibilität.

    InformationsquelleAutor iConnor

  3. 2

    Wenn Sie nicht ändern Sie die HTML-oder das CSS-stylesheet, können Sie versuchen, diese jQuery (ungetestet):

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

    InformationsquelleAutor Stefan

  4. 2

    CSS-pseudo clsses kann Ihnen dabei helfen. Mehr Infos auf: nth-child die pseudo-Klasse erhalten Sie von Klicken Sie Hier

    button:nth-child(3) {

  //Your CSS Here
}
    <Kommentare entfernt>. Die Kommentare sind nicht hier um zu streiten, welche Antwort besser oder nützlicher, basierend auf die Besonderheiten der jeweiligen Antwort. Wenn Sie eine Antwort gefunden zu sein, nützlich oder nicht nützlich sind, upvote oder downvote Sie es entsprechend.

    InformationsquelleAutor Prasanth K C

Schreibe einen Kommentar