Wählen Sie mehrere untergeordnete Elemente in CSS aus [closed]

Lesezeit: 12 Minuten

Benutzeravatar von Manoz
Manoz

Ich versuche, die Ellipsenklasse in CSS für eine Tabelle anzuwenden. Es gibt also einige Spalten, die diese Auslassungsklasse haben müssen. Ich habe mehrere Spalten in einer Tabelle.

Ich mache das durch nth-child Eigenschaft in CSS, gibt es eine andere Möglichkeit, zufällig mehrere untergeordnete Elemente auszuwählen?

Ich habe es versucht-

.ListTaskTime tbody tr >td:nth-child(3) a
{
      text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

Obwohl dieselbe Tabelle eine weitere Spalte hat 5th-childjetzt muss ich für dieses Kind eine separate Klasse erstellen, daher für andere Spalten.

Ich möchte meinen CSS-Code nicht erweitern. Gibt es eine andere Lösung?

  • FYI Sie können/sollten Ihren Selektor auf kürzen .ListTaskTime td:nth-child(N) (Nun, eine Liste von ihnen, die durch ein Komma getrennt sind, wie in den ersten beiden Antworten angegeben), es sei denn, Sie haben Spezifitätsprobleme

    – FelipeAls

    4. Mai 2013 um 7:35 Uhr

  • @FelipeAls Dann würde ich ihm vorschlagen, es zu verwenden nth-of-type In diesem Fall

    – Herr Alien

    4. Mai 2013 um 7:36 Uhr

  • @Mr.Alien Wir kennen die Struktur der Zeilen nicht (gibt es th auf den ersten Spalten oder nicht?), aber das ist in Listen und Tabellen sehr überschaubar. Obwohl der Unterschied durch gebracht :nth-of-type wird in Inhalten wie p, hN, (Abschnitt, div, Artikel), Liste wiederholter Klassen usw. begrüßt

    – FelipeAls

    4. Mai 2013 um 7:38 Uhr

  • Versuchst du wirklich zu selektieren zufällig Kinder? CSS hat kein Konzept der Zufälligkeit. Diese Frage ist wirklich unklar; alle bisherigen Antworten haben gerade gewählt willkürlich Kinder, nicht zufällig Kinder.

    – TylerH

    18. September 2020 um 18:48 Uhr

Benutzeravatar von Mr. Alien
Herr Ausländer

Sie können die Klassen mit einem Komma trennen ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Hinweis: Sie müssen die überprüfen nth-child und definieren Sie es manuell in Ihrem Stylesheet, da CSS es nicht für Sie entscheiden kann, wenn die Spalten größer werden.

Wenn Sie eine serverseitige Sprache zum Generieren einer dynamischen Tabelle verwenden, können Sie Funktionen wie verwenden substr() um die Buchstaben zu kürzen.

Randnotiz: Sie müssen nicht verwenden > es sei denn und bis Sie keinen Kindertisch haben, ist dies ausreichend. tbody tr td:nth-child(3)

  • Gibt es eine Möglichkeit, alle diese 3 Kinder (3,6,9) auf einmal zu definieren, ohne die gesamte Hierarchie zu schreiben, da alle Kinder Geschwister sind und demselben Elternteil gehören, der dieselbe Beziehung hat?

    – banal

    12. Juni 2018 um 6:17 Uhr

  • Für zukünftige Suchende sehr nützliche Links für solche spezifischen Auswahlen – css-tricks.com/useful-nth-child-recipies

    – Tushar Kshirsagar

    30. März 2020 um 10:01 Uhr

  • Sie können auch den Selektor :is verwenden. .ListTaskTime tbody tr >td:is(:nth-child(3), :nth-child(6), :nth-child(9))

    – Cj Belo

    16. Mai um 12:04 Uhr

Benutzeravatar von Levi Uzodike
Levi Uzodike

Wenn ich das Problem richtig verstehe, suchen Sie nach einer Möglichkeit, nur die 3. und 5. Spalte auszuwählen. Hier ist ein Weg: td:nth-child(-2n+5):not(:first-child) oder td:nth-child(-2n+5):nth-child(n+3)

(Ich bin mir nicht sicher, ob die Verwendung von ‘verschachtelten Selektoren'[I just made this term up and am unsure if it is real] dh :not(:first-child) ist schneller als die Verwendung der funktionalen Notation, dh :nth-child(n+3) oder nicht[my guess is yes, since the latter seems to involve extra iteration; see below in the long-winded explanation])

Referenz (scrollen Sie zum Abschnitt „Beispiele“, um alle Möglichkeiten zu sehen, und weiter nach unten zum Abschnitt „Browser-Kompatibilität“ für, Sie haben es erraten, die Browser-Kompatibilität)

Hier ist eine langatmige Erklärung:

Ich musste diese Erklärung noch einmal bearbeiten, hauptsächlich weil das ganze Konzept von “bis zum letzten” (zB beginnend beim 3. bis letzten Kind) Quatsch ist. Die funktionale Notation berücksichtigt nicht die Gesamtheit der untergeordneten Elemente, sodass sie nicht als beginnende Auswahl am Ende der Gruppe der untergeordneten Elemente angesehen werden kann

Die Methode, die @Turnerj in seiner Antwort angesprochen hat und nach der @bansal gesucht hat und die die ursprüngliche Frage löst, wird in der Referenz als “Funktionale Notation” beschrieben.

An+B Repräsentiert Elemente, deren numerische Position in einer Reihe von Geschwistern mit dem Muster An+B übereinstimmt, für jede positive ganze Zahl oder jeden Nullwert von n. Der Index des ersten Elements ist 1. Die Werte A und B müssen beide ganze Zahlen sein.

Zum Beispiel, wenn Sie Kind 3 bis zum letzten Kind wollen, das Sie tun könnten :nth-child(n+3). (A=1; B=3) Wie das Zitat sagt, beginnt n immer bei 0. Nehmen wir zum Beispiel an, es gibt 5 Kinder. Das gibt Ihnen:

  • Kind 3(0+3)
  • Kind 4(1+3)
  • Kind 5(2+3)

3+3 führt zu Kind 6, das nicht existiert. Und da n bei 0 beginnt und nicht negativ wird, gibt es keine Möglichkeit, Kind 2 oder 1 auszuwählen.

Sie können auch Kind 3 an den Anfang bringen, indem Sie es tun :nth-child(-n+3). (A=-1; B=3)

  • Kind 3(-1*0 + 3)
  • Kind 2(-1*1 + 3)
  • Kind 1(-1*2 + 3)
  • kein Kind: 0=(-1*3 + 3)

Der folgende Abschnitt kann übersprungen werden, um Verwirrung zu vermeiden. Es wurde hier für jeden hinterlassen, der den unkorrigierten Quatsch schon einmal gelesen hat, damit sie alle Unwahrheiten, die sie als wahr akzeptiert haben, “verlernen” können

ANFANG DES BALONEY “ZU LETZTEN” ABSCHNITTES[HAS BEEN CORRECTED]


Wenn Sie möchten, dass in einer Gruppe von 15 Kindern jedes 4. Kind ab dem 3. bis zum letzten Kind rückwärts geht, :nth-child(4n-3). (A=4; B=-3) Eigentlich sollte das Rückwärtsgehen A = -4 ergeben, und Sie können auch nicht “bis zum letzten” tun, aber in diesem speziellen Fall funktioniert es Nach der gleichen Logik wie zuvor:

  • kein Kind: -3=(4*0 – 3)
  • Kind 1 (4*1 – 3)
  • Kind 5 (4*2 – 3)
  • Kind 9 (4*3 – 3)
  • Kind 13 (4*4 – 3)

Auch wenn du rückwärts gehst, A[the coefficient of n] bleibt positiv, weil B ist negativ, was bei -3 (3. bis letztes) beginnend gedacht werden kann.

Dieses “bis zuletzt”-Zeug funktioniert nur, wenn T % A = A - 1wo T ist die Gesamtzahl der Kinder. Das klappt so TKind sozusagen bezeichnet werden kann -1 bezüglich A, wenn das Sinn macht. Wo in diesem Beispiel T ist 15 und A ist 4, 15 % 4 = 3 = 4 - 1, es funktioniert also. Weitere Erklärung: Wenn wir bei “bis zum Schluss” sozusagen mit 4 rechnen würden,

-3 -2 -1 0 |-3 -2 -1 0|-3 -2 -1 0 |-3 -2 -1“zu dauern” in 4

-15 -14 -13 -12|-11 -10 -9 -8|-7 -6 -5 -4 |-3 -2 -1“halten”

1 2 3 4 | 5 6 7 8| 9 10 11 12| 13 14 15Regulär

1 2 3 4 | 1 2 3 4| 1 2 3 4 | 1 2 3Im 4

15 wird am Ende richtig bezeichnet -1 oder zuletzt und 14 als -2 oder vorletzte und 13 als -3 oder drittletzte usw.

Aber würde es funktionieren, wenn die Gesamtzahl der Kinder T waren 16? Nach der angegebenen Formel T % A = A - 1 [16 % 4 = 0 ≠ 4 - 1], wir sollten nicht erwarten, dass es funktioniert. Wir würden wollen 16 zu sein -1 und 15 zu sein -2aber das sind sie nicht. Für Neugierige funktioniert das „bis-letzte“-Denken nur für T=15 wann A=1,2,4,8(Faktoren von 16(T+1); Pro T=16seit T+1=17 ist nur eine Primzahl A=1 lässt das „bis-letzte“-Denken wirken

Wenn die “letzten” Sachen stets funktionierte, würden wir erwarten :nth-child(4n-3) (A=4; B=-3) mit T = 16 statt 15, was bedeutet, dass Sie von der 3. bis zur letzten Zahl in Vielfachen von 4 gehen. Und wir würden die 3. bis letzte Zahl erwarten, 14um in der Sequenz zu sein, aber hier ist, was wirklich passiert:

  • kein Kind: -3=(4*0 – 3)
  • Kind 1 (4*1 – 3)
  • Kind 5 (4*2 – 3)
  • Kind 9 (4*3 – 3)
  • Kind 13 (4*4 – 3)

SIE ERHALTEN DIE GLEICHEN KINDER[CHILDREN]:). Sie sehen also, dass dieselben Kinder aufgrund der Beziehung zwischen ihnen hervorgebracht werden A und B. TDie einzige Rolle von ist es, die Grenze zu bestimmen (die Sequenz könnte das 17. Kind enthalten, aber T=16).

Ok, zurück zum ursprünglichen Text T = 15

Wenn der Koeffizient negativ wäre, würden Sie ins Negative absteigen und nie eine positive Zahl erhalten (wo die Kinder sind). Mit anderen Worten, A<0; B<0 gibt keine Kinder.

Im gleichen Szenario könnte das gleiche Ergebnis auch durch erzielt werden

  • :nth-child(-4n+13)(jedes 4. Kind rückwärts ab dem 13. Kind)
  • :nth-child(4n+1)(jedes 4. Kind ab dem 1. Kind)
  • :nth-child(4n-15)(jedes 4. Kind ab dem 15. bis letzten KindWenn B negativ ist, können Sie nicht daran denken, mit dem zu beginnen Bbis letztes Kind, wie oben erläutert)

Beachte das :nth-child(4n+5) wird Kind 1 ausschließen, weil n kann nicht negativ sein. Um alle untergeordneten Elemente in der Sequenz zu erhalten (in diesem Beispiel 1,5,9,13), mit B POSITIV sein, muss das Muster an einem der Enden der Sequenz beginnen (in diesem Beispiel am 1. oder 13.). Jedes Muster, das am 9. oder 5. beginnt, schließt andere Zahlen aus. Es wird NICHT wie modulo(%) zum Anfang geloopt. Doch wenn B negativ ist (-7 oder -11 für Platz 9 bzw. 5 oder jede weitere negative Zahl, die in diesem Beispiel um ein Vielfaches von 4 kleiner ist), erhalten Sie immer alle Kinder in der Sequenz, unabhängig davon, wo Sie beginnen, vorausgesetzt, wie zuvor erwähnt, dass dies der Fall ist A[coefficient of n] wird positiv gehalten.


ENDE DES BALONEY “ZU LETZTEN” ABSCHNITTES[HAS BEEN CORRECTED]

Du kannst tun :nth-child(odd)(:nth-child(2n+1)) und :nth-child(even)(:nth-child(2n)), aber das, was mich am meisten interessierte, war das Abrufen der internen Bereiche. Dies geschieht einfach, indem man den Schnittpunkt von zwei nimmt :nth-child()‘s.

Wenn Sie beispielsweise nur die 3. und 5. Spalte in einer Tabelle mit 490 Spalten möchten (es spielt keine Rolle für das Problem, ich habe es nur ausgewählt, weil es so ist wie oft wir jeder Person am Tag vergeben sollten)

  • td:nth-child(-n+5) gibt Ihnen Kind 1-5 oder Kind ≤ 5
  • td:nth-child(n+3) gibt Ihnen Kind 3-490 oder Kind ≥ 3
  • td:nth-child(odd) gibt dir ich denke du verstehst es

Also alles zusammen ist das: td:nth-child(-n+5):nth-child(n+3):nth-child(odd). (Die Spalten, die kleiner als 5 UND größer als 3 UND ungerade sind[this takes out child #4].)

Ich habe es in dieser Reihenfolge angeordnet, um zu minimieren, wie viele Ergebnisse jeder Selektor für den nächsten erstellen würde. Wenn Sie setzen td:nth-child(n+3) Zuerst würden Sie die gleichen Endergebnisse erhalten, aber Sie würden Kind 3-490 an den nächsten Selektor weitergeben, anstatt nur Kind 1-5 weiterzugeben. Dies führt wahrscheinlich zu einer unbedeutenden Leistungssteigerung, könnte aber möglicherweise in größeren Maßstäben nützlich sein.

Ich bin mir nicht sicher, ob dieses letzte Bit zur Reihenfolge tatsächlich für jeden Browser funktioniert oder ob Browser dies bereits optimieren, aber das war nur mein Gedankengang.

Am Ende all dies zu schreiben, dachte ich an td:nth-child(-n+5):nth-child(2n+3). Dann dachte ich an td:nth-child(-2n+5):nth-child(n+3) und erneut bearbeitet, aber ich hatte die Lösung, die ich ursprünglich hatte, bereits erklärt, also werde ich diese nicht löschen und diese erneut erklären, weil ich denke, dass diese letzte Lösung aus allen anderen gegebenen Beispielen sinnvoll ist. Ich sage nur, dass ich denke, dass der letzte seit dem ersten n-ten Kind-Selektor der beste ist, dh td:nth-child(-2n+5) geht nur 3 tds auf den 2. Selektor anstelle des 5 tdist das td:nth-child(-n+5) weitergeben würde.

Benutzeravatar von Turnerj
Turnerj

Das sollte es tun:

.ListTaskTime tbody tr > td:nth-child(3) a,
.ListTaskTime tbody tr > td:nth-child(5) a
{
    text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

Wenn Sie ein Komma zwischen einem Selektor wie diesem verwenden, können Sie mehrere Selektoren mit demselben Stil deklarieren. Sie können so viele durch Kommas getrennte Selektoren haben, wie Sie möchten, damit mehr Elemente denselben Stil verwenden können.

Ich könnte das hinzufügen, es sei denn, Sie haben ein widersprüchliches Styling auf der Seite, using .ListTaskTime tbody tr > td:nth-child(3) a ist ziemlich spezifisch und könnte zu so etwas wie vereinfacht werden .ListTaskTime td:nth-child(3) a.

Vielleicht interessiert es Sie auch, etwas darüber zu erfahren :nth-child(even) und :nth-child(odd) oder noch komplexer nth-child Pseudoselektoren wie :nth-child(2n+3) Dies kann Ihnen helfen, wenn es später mehr Spalten gibt, die in ein zu formatierendes Muster passen.

Ich bin mir nicht ganz sicher, was Sie mit “Klasse anwenden durch Auswählen der Klasse” meinen, aber ich sehe, Sie möchten im Grunde eine CSS-Selektorzeichenfolge.

Wenn Sie mit dieser fünften untergeordneten Spalte (?) Eine andere Klasse benötigen, meinen Sie alle anderen, aber dieses untergeordnete Element in der Tabelle hat die Eigenschaft von text-overflow: ellipsis drin, dann wäre das ein kurzer Alternativweg.

    .ListTaskTime td:not(:nth-of-type(5)) a{
        /*styles for ellipse goes here*/}
    .ListTaskTime td:nth-of-type(5) a{ 
        /*styles for not-ellipse goes here*/}

(Seltsame Sache, wenn das klassifizierte Objekt a <p>diese bestimmte Auswahlzeichenfolge funktioniert jedoch nicht als a <div> es tut..)

Könnte man auch verwenden tr>:nth-child() um auch auf alle Objekte abzuzielen, die denselben Raum teilen wie <td>. Alle anderen heiklen Bits (mehrere Abfragen usw.) wurden von anderen sauber umrissen. Es tut mir leid zu sagen, dass es, wenn Sie zwei verschiedene Formate in einer Tabelle haben, so gut wie unmöglich ist, sie beide in einem einzigen Selektor in einfachem CSS anzugeben. 😉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:nth-child(4n-3){
            color: red;
        }
    </style>
</head>
<body>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>

</body>
</html>

  • Hier können Sie einen Blick darauf werfen

    – Nain Abbas

    18. September 2020 um 15:17 Uhr

  • Dies bekommt jedes 4. Kind (plus das erste), nicht zufällige Kinder. Beliebig != zufällig

    – TylerH

    18. September 2020 um 18:50 Uhr

  • Hier können Sie einen Blick darauf werfen

    – Nain Abbas

    18. September 2020 um 15:17 Uhr

  • Dies bekommt jedes 4. Kind (plus das erste), nicht zufällige Kinder. Beliebig != zufällig

    – TylerH

    18. September 2020 um 18:50 Uhr

1437110cookie-checkWählen Sie mehrere untergeordnete Elemente in CSS aus [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy