Wie gruppieren Sie mehrere Elemente CSS?

Ich benutze Bootstrap. Die Tabelle td puffert mit 8px per Bootstrap. Aber ich brauche nur 2px Padding, also verwende ich diese Stylesheets, um das Layout zu erstellen.Wie gruppieren Sie mehrere Elemente CSS?

.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td { 
    padding: 2px; 
}

Ich möchte wissen, wie kann ich die td leichter auswählen? Ich bin neugieriger über diese Weise eine Schicht ein Schritt.

.table > (thead, tbody, tfoot) > (td , th)

Oder diese: Kann die * Spiel viele Schichten?

.table > * > td

Hier ist das Schnipsel, jede Hilfe wird geschätzt. Danke im Voraus!

table, td { 
 
    border: 1px solid; 
 
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<html> 
 
    <head> 
 
    <style> 
 
    .table > thead > tr > th, 
 
    .table > tbody > tr > th, 
 
    .table > tfoot > tr > th, 
 
    .table > thead > tr > td, 
 
    .table > tbody > tr > td, 
 
    .table > tfoot > tr > td { 
 
     padding: 1px; 
 
    } 
 
    </style> 
 
    </head> 
 
    <div class="container"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr><td>1</td><td>2</td><td>3</td></tr> 
 
     <tr><td>4</td><td>5</td><td>6</td></tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</html>

Quelle

2016-12-06 Kris Roofe

'.table> *> tr> td, .table> *> tr> th'? – kukkuz

@kukkuz Es funktioniert nicht. Sie können es im Schnipsel meiner Frage überprüfen. –

Ich habe @ kukkuz's Vorschlag mit deinem Snippet getestet und es funktioniert ganz sicher. – BoltClock

In CSS-Selektoren 4 gibt a functional pseudo-class :matches ist gesetzt, das ermöglicht eine solche Gruppierung:

.table > *:matches(thead, tbody, tfoot) > tr > *:matches(th, td) { ... }

Leider funktioniert es derzeit nur in Safari (Chrome und Firefox haben auch experimentelle Unterstützung für seine alte Form als :-webkit-any() und :-moz-any(), aber es ist nicht sehr hilfreich).

Ein einzelner universeller Selektor * kann nicht viele Werte erreichen. Es bedeutet "jedes einzelne Element". Sie können jedoch zwei Ebenen beliebiger Elemente mit * > * abgleichen.

Ich würde vorschlagen, einen Hack zu verwenden, um die Spezifität wie diese Erhöhung:

.table > * > tr > *:not(#any-fictional-id) { 
 
    padding: 1px; 
 
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<!-- whatever... --> 
 
    <div class="container"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr><td>1</td><td>2</td><td>3</td></tr> 
 
     <tr><td>4</td><td>5</td><td>6</td></tr> 
 
     </tbody> 
 
    </table> 
 
    </div>

:not() Selektor die Spezifität des Arguments hat, in diesem Fall die Spezifität der ID, dass ist definitiv höher als die Spezifität irgendeiner Klasse. Sie können es jedoch bei Bedarf mit !important überschreiben. Sie können jede fiktive ID angeben, die im Markup nicht vorhanden ist.

Quelle

2016-12-06 09:41:19

Ich weiß hier nichts über # any-existing-id. –

Ich habe meine Antwort bearbeitet. Der Punkt ist, die _fictional_ ID anzugeben, die tatsächlich nicht übereinstimmt (und daher mit ': not()' verglichen werden kann). –

Wenn die Spezifität des Selektors nur mit der von '.table> (Typselektor)> tr> (Typselektor) übereinstimmen muss', empfehle ich '.table> *> tr> *: not (_): not (_) 'anstelle eines ID-Selektors. Siehe http://stackoverflow.com/questions/28299817/can-type-selectors-be-repeated-to-ancrease-specificity/28300471#28300471 – BoltClock

Versuchen:

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th{ 
    border-top: 1px solid #e6e6e6 
}

Quelle

2016-12-06 08:45:34

Warum sollte das OP das "ausprobieren"? Eine ** gute Antwort ** wird immer eine Erklärung haben, was getan wurde und warum es so gemacht wurde, nicht nur für das OP, sondern auch für zukünftige Besucher von SO. –

Danke für Ihre Erklärung bro, –

Auf diese Weise können Sie wählen, td oder mehr Selektor easly von css –

Versuchen Sie, diese

table, td { 
    border: 1px solid; 
} 
.table td { 
    padding:2px !important; 
}

Wenn Sie das "th" wollen auch px padding haben dann

table, td { 
    border: 1px solid; 
} 
.table td, .table th { 
    padding:2px !important; 
}

Quelle

2016-12-06 08:52:10 Gautham

-1

Sie können

table td, table th { 
    border: 1px solid; 
}

Quelle

2016-12-06 09:00:41 Mohkamaru

Kannst du mir den Ausschnitt meiner Frage machen, und überprüfe deine Antwort? –

Verwenden Selektor als table.table > * > tr > th, table.table > * > tr > td wie auf diese Weise versuchen, den Füllwerts

table, td { 
 
    border: 1px solid; 
 
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<html> 
 
    <head> 
 
    <style> 
 
    .table > * > tr > th, .table > * > tr > td { 
 
     padding: 1px !important; 
 
    } 
 
    </style> 
 
    </head> 
 
    <div class="container"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr><td>1</td><td>2</td><td>3</td></tr> 
 
     <tr><td>4</td><td>5</td><td>6</td></tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</html>

Quelle

2016-12-06 09:02:46 jafarbtech

Dies auch Overlay der Bootstrap sein, können Sie es überprüfen. Das Padding ist 8px Bootstrap. –

Im Allgemeinen werden deshalb CSS-Vorprozessoren wie SCSS oder LESS verwendet. Um Ihren Code funktional besser syntaktisch darzustellen, d. H. Mehr zu tun und weniger zu schreiben.

Die SCSS Version von dem, was würden Sie sein wollen:

table { 
    thead, tbody, tfoot { 
    tr { 
     td, th { 
     padding: 2px; 
     } 
    } 
    } 
}

Quelle

2016-12-06 10:58:55 nashcheez

Wie gruppieren Sie mehrere Elemente CSS?

Antwort

Verwandte Themen