webentwicklung-frage-antwort-db.com.de

benutzerdefinierte CSS, die von Bootstrap-CSS überschrieben wird

Ich verwende Bootstrap 3 und habe eine Tabelle mit einigen Daten. In dieser Tabelle habe ich Javascript für die bedingte Formatierung angewendet. Für den Fall, dass eine Bedingung erfüllt ist, setze ich die Elementklasse auf "rot".

.red {
background-color:red;
color:white;
}

die Elemente HTML lautet wie folgt:

<td class="red">0</td>

Ich habe jetzt einen Konflikt in ungeraden Zeilen, auf die die Textfarbe angewendet wird, aber die Hintergrundfarbe wird durch die folgende Datei von bootstrap überschrieben.

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

wie kann ich diesen Konflikt lösen und sicherstellen, dass die rote Klasse Vorrang hat?

21
mmilan

Besonderheit

Ihr Problem ist am wahrscheinlichsten bezüglich der Spezifität. Chris Coyier hat einen großartigen Artikel zur CSS-Spezifität . Ich würde auch vorschlagen, dass Sie sich diesen praktischen Rechner für die Genauigkeit anschauen.

Mit diesem Rechner kann man sehen, dass .table-striped > tbody > tr:nth-child(odd) > td eine Spezifität von 23 hat. Um dies zu umgehen, muss jede neue Regel eine Spezifität von etwas gleich oder größer als 23 haben. .red ist also 10, also wird es nicht schneiden.

In diesem Fall sollte es so einfach sein, die vorhandene Spezifität abzugleichen und dann Ihre Klasse hinzuzufügen. .table-striped > tbody > tr:nth-child(odd) > td.red gibt uns eine Spezifität von 33. Da 33 größer als 23 ist, sollte Ihre Regel jetzt funktionieren.

Ein Funktionsbeispiel finden Sie hier: http://bootply.com/91756

!wichtig

Im Allgemeinen sollten Sie !important niemals verwenden, es sei denn, Sie möchten niemals, dass diese Regel überschrieben wird. !important ist im Grunde die nukleare Option. Ich bin gemäßigt zuversichtlich, dass Sie, wenn Sie die Spezifität verstehen, niemals !important brauchen sollten, um eine benutzerdefinierte Regel in einem Framework wie Bootstrap richtig funktionieren zu lassen.

Aktualisieren

Nach einigem Nachdenken ist die Regel, die ich hier vorlege, wahrscheinlich zu spezifisch. Was passiert, wenn Sie eine Zelle auf einem Tisch markieren möchten, die nicht entfernt wurde? Um Ihre Regel etwas globaler zu gestalten und dennoch ausreichend spezifisch zu sein, um in entfernten Tabellen arbeiten zu können, würde ich mit .table > tbody > tr > td.red gehen. Dies hat die gleiche Besonderheit wie das Bootstrap-Stripping, funktioniert aber auch für Tabellen, bei denen kein Zebra-Stripping ausgeführt wird. Ein aktualisiertes Beispiel ist hier: http://bootply.com/91760

48
Sean Ryan

Lesen Sie zunächst Sean Ryans Antwort - es ist sehr gut und informativ, aber ich musste seine Antwort ausreichend anpassen, bevor ich meinen Code einfügte, um eine eindeutige Antwort zu erhalten, die der nächsten Person helfen könnte. 

Ich hatte fast die gleiche Frage wie das OP, musste aber auch die Zeile hervorheben. Nachfolgend wird erläutert, wie ich die Antwort von Sean Ryan verbessert (?) Und in meine endgültige Implementierung verwandelt habe, mit der Sie fast jedem zufälligen Element eine Klasse hinzufügen können, einschließlich "tr" oder "td"

Sehen Sie dies auf bootply.com

CSS 

    /* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css

FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756

I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/

.highlight {
    background-color: lightyellow;
}


/* supersede bootstrap at the row level by being annoyingly specific 
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
    background-color: pink;
}

/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
    background-color:lightgreen;
}

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>2hi</td>
            <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>3hi</td>
          <td>This whole row should be highlighted.</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>4hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr><tr>
            <td>5hi</td>
            <td class="highlight">Just a specific cell to be highlighted</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>
4
JJ Rohrer

Benutzen 

.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

um einen spezifischeren Selektor oder das! Schlüsselwort zu erstellen (wie von Andrew gezeigt)

Alternativ und wahrscheinlich am besten können Sie eine benutzerdefinierte Bootstrap-Konfiguration erstellen, die kein Tabellen-Styling enthält. 

2
Stefan

Sie müssen !important nach dem Klassenstil anwenden. da wir den Selektor verwenden, ist .table-striped > tbody > tr:nth-child(odd) > td, der spezifischer als die Klassenregel ist und Vorrang hat. Sie müssen dies also mit !important überschreiben.

Es gibt jedoch zwei Möglichkeiten, dies zu beheben:

  1. Verwenden Sie !important, um eine Regel "wichtiger" zu machen. Ich würde dies vermeiden, weil es verwirrend ist, wenn Sie viele Regeln auf mehrere Dateien verteilt haben.

  2. Verwenden Sie für das zu ändernde td einen Selektor mit höherer Spezifität. Sie können eine ID hinzufügen. Dadurch können Sie die Regel aus der verknüpften CSS-Datei ersetzen.

Lese css Vorrang

2
Ishan Jain

Sie können !important nach jedem Stil in der .red-Klasse hinzufügen. Durch das Hinzufügen von! Wird dem CSS mehr Gewicht verliehen, sodass Sie andere Stile überschreiben können.

Ihre CSS würde so aussehen:

.red {
    background-color: red !important;
    color: white !important;
}
2
Andrew

Sie können nach dem Wert, den Sie Vorrang haben möchten, einen Wert von !important anwenden.

1
user2578173

Wäre es nicht eine Lösung, dass anstelle einer Klasse css an das Element angehängt wird?

0
Matthew Trow