Ich habe diesen Selektor in Twitter Bootstrap gesehen:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Weiß jemand, wie diese Technik heißt und was sie tut?
css
css-selectors
jon
quelle
quelle
Antworten:
Es ist ein Attribut-Platzhalter. In dem von Ihnen angegebenen Beispiel wird nach
.show-grid
untergeordneten Elementen gesucht, die eine Klasse enthalten, die CONTAINS enthältspan
.Wählen Sie also das
<strong>
Element in diesem Beispiel aus:Sie können auch nach "beginnt mit ..." suchen.
was auf so etwas funktionieren würde: -
und 'endet mit ...'
das würde funktionieren
Gute Referenzen
quelle
div[class^="something"] { }
Selektor "beginnt mit" funktioniert nur, wenn das Element eine einzelne Klasse enthält, oder wenn mehrere, wenn diese Klasse die erste auf der linken Seite ist.div[class~="something"]
für die Spiele im Raum zu finden getrennte Listen (zB Klassen) unddiv[class|="something"
für den Abgleich auf einen Bindestrich in der Liste zB passende etwas getrennt you-are-etwas classname obenEs ist ein CSS - Selektor, der alle Elemente mit der Klasse wählt Show-Raster , das ein untergeordnetes Element hat , die Klasse ist enthält den Namen Spanne .
quelle
Folgende:
bedeutet, dass alle untergeordneten Elemente von '.show-grid' mit einer Klasse, die das Wort 'span' enthält, diese CSS-Eigenschaften erhalten.
Alle Elemente außer dem werden getroffen
<span>
von selbst werden getroffen.In Bezug auf Bootstrap:
span6
: Dies war die Gerüsttechnik von Bootstrap 2, bei der ein Abschnitt basierend auf Teilen von 12 in ein horizontales Gitter unterteilt wurdespan6
hätte er eine Breite von 50%..col-*
Klassen (z. B.col-sm-6
), die auch einen Medien-Haltepunkt angeben, um die Reaktionsfähigkeit zu handhaben, wenn das Fenster unter eine bestimmte Größe verkleinert wird. Weitere Dokumentation finden Sie in Bootstrap 4.1 und Bootstrap 3.3.7 . Ich würde heutzutage empfehlen, einen späteren Bootstrap zu verwendenquelle
Es werden alle Elemente ausgewählt, bei denen der Klassenname
"span"
irgendwo die Zeichenfolge enthält . Es gibt auch^=
für den Anfang einer Zeichenfolge und$=
für das Ende einer Zeichenfolge. Hier ist eine gute Referenz für einige CSS-Selektoren: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/Ich bin nur vertraut mit den Bootstrap - Klassen ,
spanX
wobei X eine ganze Zahl ist, aber wenn es andere Wähler waren , dass endete inspan
, wäre es auch unter diesen Regeln fallen.Es ist nur hilfreich, pauschale CSS-Regeln anzuwenden.
quelle