CSS-Selektoren für jeden Tag

Arten von Selektoren

Selector - Tag dient als Name Selektor - Tag für die Eigenschaften , die Sie ändern möchten.

Die universelle Selektor, der mit dem Symbol * bezeichnet ist und verwendet wird , um die erforderlichen Eigenschaften aller Elemente auf der Seite zu ändern.

Die Klassen sind für die Elemente mit einem Klasse - Attribut und den Wert verwendet.

Die Kennungen werden für Elemente mit dem id - Attribut und dem Wert verwendet. Der Hauptunterschied zwischen den Klassen von Kennungen ist, dass die Namen der zweiten eindeutig sein muss, nicht wiederholt, die sie mit Skripts (JavaScript) in Verbindung verwendet werden können.

Pseudo-Klassen sind so konzipiert , um den Stil der bestehenden Seitenelemente zu ändern , nach ihrem dynamischen Zustand, wie wenn sie mit Links arbeiten (: link ,: besuchte ,: schweben ,: aktiv ,: Fokus). Pseudo-Elemente definieren Stilelemente , die nicht eindeutig in der Dokumentstruktur definiert sind (: first-letter ,: erste -Linie), und lassen Sie den Inhalt des nicht existent zu erzeugen und zu stilisieren (: vor ,: nach und Inhaltseigenschaften). In CSS3 beginnen Pseudo-Elemente mit zwei Doppelpunkte :: (:: first-letter, :: first-line, :: vor, :: after).

Selektoren Attribut. Lassen Sie stilisieren Element nicht nur für den Wert des Tags, sondern auch auf den Wert eines Attributs (a [attr]).

Kontext - bezogene Selektoren. Styling Elemente innerhalb des anderen Elements (ab).

Kind - Selektoren. Styling-Element befindet sich unmittelbar hinter einem anderen Element und ist sein direkter Nachkomme (a> b).

Nähe Selektoren. Entwickelt für das Styling benachbarte Elemente, die einen gemeinsamen Elternteil haben. (A + b)

Verwandte Selektoren. Selektoren sind zu benachbarten ähnlich, aber mit dem Unterschied, dass die benachbarten Elemente alle sind gestylt, nicht nur den ersten benachbarten Element. Zum ersten Mal erschienen in CSS3. (A ~ b).

Lassen Sie uns beginnen!

*

  * {
  margin: 0;
  padding: 0;
  }
 

Lassen Sie uns mit den einfachsten Dingen für Anfänger beginnen, bevor zu fortgeschrittenen Selektoren fortzufahren.

Das Sternchen markiert alle Elemente auf der Seite. Viele Web-Entwickler nutzen diese auf "reset" aller internen und externen Polsterung.

Auch kann das Symbol * für die Kind-Elemente des Objekts verwendet werden.

  #container * {
  border: 1px solid black;
  }
 

Dieser Code wird bei allen Elementen ausgerichtet, dass die Kinder der Einheit mit der Kennung Container befinden.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

#X

  #container {
  Breite: 960px;
  margin: auto;
  }
 

Gitter Symbol erlaubt es uns, Elemente von ID zu wählen. Dies ist eine der häufigsten Formen der Elemente auswählen, aber vorsichtig sein, wenn es zu benutzen.

"Fragen Sie sich: Ich bin sicher, dass Sie ID verwenden müssen ein Element hinzufügen, um es zu verweisen?"

Id-Selektoren sind unflexibel und schwierig in verschiedenen Projekten wieder zu verwenden. Wenn möglich, versuchen Sie zunächst den Tag-Namen zu verwenden, oder sogar eine Pseudo-Klasse.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

.X

  .error {
  Farbe: rot;
  }
 

Dies ist ein Klasse-Selektor. Der Unterschied zwischen der ID und Klassen, die mit Klassen helfen, können Sie mehrere Elemente auswählen. Verwenden Sie Klassen, wenn Sie einen Stil zu einer Gruppe von Elementen anwenden möchten.

Andernfalls verwenden Sie die ID der "Nadel im Heuhaufen" zu finden und einen Stil nur ein bestimmtes Objekt anwenden.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

XY

  li a {
  text-decoration: none;
  }
 

Die folgende häufig verwendete Typselektor - Selektor Kind. Es sollte verwendet werden, wenn Sie eine Auswahl von Punktelementen produzieren müssen.

Zum Beispiel, was, wenn Sie zu wählen, nicht alle Links-Tags, und nur diejenigen, die in einer ungeordneten Liste sind? Dies ist der Fall, wenn Sie Nachfahrenselektoren verwenden sollten.

"Tipp: Wenn Ihr Selektor wie XYZA B.error aussieht, dann werden Sie wahrscheinlich etwas in der Art und Weise tun Sie sich immer fragen, ob dies wirklich der einfachste Weg ist."

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X

  a {color: red;}
  ul {margin-left: 0px;}
 

Was ist, wenn Sie auf alle Elemente eines bestimmten Typs auf der Seite beziehen möchten, wenn sie nicht über eine ID oder Klasse? Macht es einfacher, Typselektoren verwenden. Wenn Sie alle ungeordnete Listen auswählen müssen, verwenden Sie ul {}.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: visited und X: link

  a: link {color: red;}
  a: visited {color: purple;}
 

Hier haben wir die Pseudo-Klasse verwenden: Link, um alle Links zu wählen, die Klick erreicht wurde noch nicht.

Es gibt auch eine Pseudo-Klasse: visited, die, wie man es erwarten würde, uns auf diese Links, um den Stil nur anwenden können, die gemacht wurde, oder einen Übergang klicken.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X + Y

  ul + p {
  Farbe: rot;
  }
 

Diese semi-Selektor so genannte. In diesem Fall wird sofort jeder Absatz jedes Element ul folgende rot.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X> Y

  #container> ul {
  border: 1px solid black;
  }
 

Der Unterschied zwischen XY und X> Y ist , dass letztere nur die direkten Nachkommen wählen werden. Betrachten Sie das folgende Beispiel:

  <Div id = "container">
  <Ul>
  <Li> Listenelement
  <Ul>
  <Li> Nachkomme </ li>
  </ Ul>
  </ Li>
  <Li> </ li> Listenelement
  <Li> </ li> Listenelement
  <Li> </ li> Listenelement
  </ Ul>
  </ Div>
 

Selector #container> ul wählen werden nur die Elemente ul, die die direkten Nachkommen des div mit der ID - Block - Container sind. dh in diesem Fall nehmen die Wähler das Element ul, weg nicht , die ein Kind des ersten li - Element ist.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X ~ Y

  ul ~ p {
  Farbe: rot;
  }
 

Diese Kombination von Schwester (Geschwister) Elemente , die ähnlich zu X + Y, aber es ist weniger streng. Wenn im Fall ul + p wird ausgewählt werden, werden nur die ersten Elemente von p nach dem ul (dh es gibt Kontiguität bei der Auswahl), dann vor uns jetzt häufiger Selektor ist.

In diesem Fall wird er alle Elemente p wählen, nach dem Element ul.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [title]

  a [title] {
  Farbe: grün;
  }
 

Hier verweisen wir auf die Attributselektor. In unserem Beispiel werden wir in grün nur Links mit dem Attribut Titel gemalt.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href = "foo"]

  a [href = "http://www.codeharmony.ru"] {
  Farbe: rot;
  }
 

Der obige Code wird einen Stil alle Links geben in das href-Attribut gleich http://www.codeharmony.ru ist. Diese Links werden rot. Der Rest der Links nicht diesen Stil.

Das funktioniert gut, aber es ist ein bisschen unflexibel. Was ist, wenn der Link zu Codeharmony.ru tatsächlich führt aber vielleicht als codeharmony.ru die Adresse statt http://www.codeharmony.ru? In solchen Fällen können wir einen regulären Ausdruck verwenden.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href * = "codeharmony"]

  a [href * = "codeharmony"] {
  Farbe: rot;
  }
 

Komm; das ist genau das, was wir brauchen. Das Sternchen bedeutet , dass der gewünschte Wert in jedem Teil des Attributs href sein kann. So können wir und http://www.codeharmony.ru und www.codeharmony.ru und codeharmony.ru wählen.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href ^ = "http"]

  a [href ^ = "http"] {
  background: url (path / to / extern / icon.png) no-repeat;
  padding-left: 10px;
  }
 

Haben Sie schon einmal darüber nachgedacht, wie einige Websites auf die Links neben die zu anderen Seiten (außerhalb der aktuellen) führen kleine Symbole tragen, die den Benutzer darüber wissen geben? Dies ist hervorragend, "Erinnerungen" an den Benutzer, dass der Link auf eine andere Website führt.

Dies geschieht mit dem Symbol ^ (Karat). Es wird allgemein in regulären Ausdrücken verwendet, um den Anfang der Zeile anzuzeigen. Wenn wir Links zu wählen, dessen Attribut mit http beginnt href wollen, können wir die Wähler in dem obigen Beispiel verwenden.

"Bitte beachten Sie, dass wir nicht für http suchen :. // Dies ist optional und darüber hinaus nehmen nicht berücksichtigt die Links auf den Protokoll https: //".

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [$ href = ". Jpg"]

  a [href = $ ". jpg"] {
  Farbe: rot;
  }
 

Und wir verwenden , um einen regulären Ausdruck über und über $ Symbol , um das Ende der Zeile zu bezeichnen. In diesem Beispiel sind wir für alle Links, die auf Bilder mit der Endung .jpg verweisen. Natürlich wird dieser Ansatz nicht mit der Erweiterung .gif für Bilder arbeiten, .png etc.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [Daten - * = "foo"]

  a [Daten-Datei des Typs = "image"] {
  Farbe: rot;
  }
 

Wie können wir die verschiedenen Arten von Bildern decken? Wir können erstellen, beispielsweise die Anzahl der Selektoren:

  a [href = $ ". jpg"],
  a [href = $ ". jpeg"],
  a [href = $ ". png"],
  a [href = $ ". gif"] {
  Farbe: rot;
  }
 

Aber es ist eine lästige Pflicht und nicht elegant. Eine weitere Option - ist Ihre eigenen Daten-Datei des Typs Attribut zu erstellen , und fügen Sie jeden Link zu dem Bild führen.

  <a href="path/to/image.jpg" data-filetype="image"> Link-</a> 

Dabei können wir den Code in diesem Beispiel verwendet werden:

  a [Daten-Datei des Typs = "image"] {
  Farbe: rot;
  }
 

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [foo ~ = "bar"]

  a [Daten-info ~ = "external"] {
  Farbe: rot;
  }

  a [Daten-info ~ = "image"] {
  border: 1px solid black;
  }
 

Hier ist ein weiterer interessanter Trick, die nicht jeder kennt. ~ (Tilde) ermöglicht es uns, die Attribute mit Werten durch Leerzeichen getrennt zu wählen, das heißt,

  <a href="path/to/image.jpg" data-info="external bild"> Klicken Sie hier </a> 

Mit dieser Technik können wir Probe mit den gewünschten Kombinationen machen:

  / * Wählen Sie die Attributdaten-Info, die den Wert eines externen * enthält /
  a [Daten-info ~ = "external"] {
  Farbe: rot;
  }

  / * Und die Daten-info Attribut auswählen, das den Wert des Bildes * enthält /
  a [Daten-info ~ = "image"] {
  border: 1px solid black;
  }
 

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: geprüft

  input [type = radio] ausgewählt {
  border: 1px solid black;
  }
 

Diese Pseudo-Klasse wählt jene Elemente, die zum Beispiel festgestellt wurden, ein Optionsfeld oder Kontrollkästchen.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nach

  .clearfix: nach {
  Inhalt: "";
  display: block;
  clear: both;
  Sichtbarkeit: hidden;
  font-size: 0;
  Höhe: 0;
  }

  .clearfix {
  * Anzeige: inline-block;
  _height: 1%;
  }
 

Diese Pseudo-Klasse können Sie Inhalte rund um das ausgewählte Element zu erzeugen.

Dieses Beispiel zeigt , wie die Pseudo-Klasse zu verwenden: Nach einem Block nach einer Leerzeile mit der Klasse .clearfix erstellt wird, dann gelöscht. Eine gute Methode ist es nicht möglich , den Überlauf zu gelten: versteckt.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: schweben

  div: Hover {
  Hintergrund: # e3e3e3;
  }
 

Dass Sie genau wissen. Offizieller Name klingt wie ein "Pseudo-Klasse, benutzerbasierte Betrieb." Es klingt beängstigend, aber in Wirklichkeit ist alles einfach. Möchten Sie das Element einen bestimmten Stil anzuwenden, wenn es mit dem Mauszeiger bewegt? Dies ist das gleiche!

"Denken Sie daran, dass alte Versionen des IE nicht verstehen, diese Pseudo-Klasse in Bezug auf etwas anderes als ein Tag."

Oft wird diese Technik verwendet, um die untere Grenze für den Bezug zu setzen, wenn Sie die Maus über sie schweben:

  a: Hover {
  border-bottom: 1px solid black;
  }
 

"Mega-Cheat: border-bottom: 1px solid black; sieht besser aus als text-decoration: underline;"

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+ (in IE6 ist nur in Bezug auf die Links)	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nicht (Selektor)

  div: nicht (#container) {
  color: blue;
  }
 

Denial kann auch sehr nützlich sein. Angenommen , ich möchte Sie alle enthalten , div auszuwählen, sondern ein mit id - Container. Zu diesem Zweck ist die Leugnung Code perfekt (nicht gleich).

Wenn ich alle Elemente auswählen müssen, mit Ausnahme von Absatz-Tags, können wir schreiben:

  *: Nicht (p) {
  Farbe: grün;
  }
 

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X :: Pseudoelement

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

Pseudo-Elemente können verwendet werden, um die Arten in einem Element zu machen, zum Beispiel die erste Zeile oder ersten Buchstaben. Sie gilt nur für Blockelemente.

Wählen Sie den ersten Buchstaben des Absatzes:

  p :: first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: Kursiv;
  padding-right: 2px;
  }
 

Dieses Stück Code wird alle Absätze auf der Seite finden, und wird mit dem ersten Buchstaben eines jeden der angegebenen Stil anwenden. Oft wird es verwendet, um die Wirkung von zu schaffen "eine Schlagzeile."

Wählen Sie die erste Zeile eines Absatzes:

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

Ähnlich wie bei dem vorherigen Beispiel, aber in diesem Fall wird die erste Zeile jeder Abschnitt ausgewählt.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: n-te-Kind (n)

  li: n-te-Kind (3) {
  Farbe: rot;
  }
 

Denken Sie an die Zeiten, in denen wir zu einem bestimmten Serien Kind-Elemente zu verweisen nicht in der Lage waren? Diese Pseudo-Klasse löst dieses Problem!

Die ganze Zahl wird als Parameter genommen. Wenn Sie das zweite Element in der Liste auswählen möchten, müssen Sie eine Konstruktion zu verwenden: li: n-Kind (2).

Wir können auch die Gruppe der Nachkommen der Elemente wählen. Wenn beispielsweise jedes vierte Element in der Liste zu wählen, müssen Sie eine Konstruktion zu verwenden: li: n - te-Kind (4N ).

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: n-te-last-Kind (n)

  li: n-te-last-Kind (2) {
  Farbe: rot;
  }
 

Was ist, wenn Sie eine große ungeordnete Liste haben, und Sie müssen zum Beispiel auf, das dritte Element vom Ende auszuwählen. Statt zu schreiben li: n-ter Kind (397), können Sie die Pseudo-Klasse n - ten-last-Kind verwenden.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-of-Typ (n)

  ul: nth-of-Typ (3) {
  border: 1px solid black;
  }
 

Manchmal gibt es Situationen, in denen anstelle der Wahl bestimmter Nachkommen eine Wahl von der Art des Elements zu bilden.

Stellen Sie sich vor, dass es fünf ungeordnete Listen auf der Seite sind. Wenn Sie den Stil nur auf die dritte Liste anwenden müssen, aber es hat nicht eine eindeutige Kennung und andere "Hinweise", können Sie die Pseudo-Klasse n - te-of-Typ (n) verwenden . Der obige Code zeigt, wie der Art zu machen nur die dritte ungeordnete Liste.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+		1.0+	1.0+	1.0+	1.0+

X: n-te-last-of-Typ (n)

  ul: nth-last-of-Typ (3) {
  border: 1px solid black;
  }
 

Ja, um das Bild zu vervollständigen, gibt es auch eine Option. So kann man eine n-Typ-Element zu einem bestimmten Zweck auswählen.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: first-child

  ul li: first-child {
  border-top: none;
  }
 

Diese Pseudo-Klasse ermöglicht es Ihnen, nur das erste Kind des Elternelements auszuwählen. Es wird oft zu entfernen Grenzen der ersten und letzten Elemente der Liste verwendet.

Zum Beispiel, wenn Sie eine Liste von Zeilen, von denen jede ein border-top und border-bottom wird, die ersten und letzten Elemente der Liste hat ein wenig störend aus dem Gesamtsystem sein.

Sie können diese Pseudo-Klasse verwenden, um diesen Mangel zu beheben.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: last-child

  ul> li: last-child {
  Farbe: grün;
  }
 

Im Gegensatz dazu wird die Klasse der ersten Kind, last-Kind das letzte Element des übergeordneten Elements auswählen.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nur-Kind

  div p: Nur-Kind {
  Farbe: rot;
  }
 

Ehrlich gesagt, es wird nur selten von der Pseudo-Klasse verwendet, aber doch auch er nützlich ist. Es ermöglicht Ihnen, die Elemente auszuwählen, die die einzigen Nachkommen für ihre Eltern sind.

In unserem Beispiel wird der Stil nur auf einen Absatz angewendet werden, die die einzige Nachkomme des div ist.

Betrachten wir zur Klarheit diese Markup:

  <Div> <p> Es gibt nur einen Absatz in dem Abschnitt. </ P> </ div>

  <Div>
  <P> Hier ist der erste Absatz in dem Abschnitt. </ P>
  <P> Hier ist der zweite Absatz in dem Abschnitt. </ P>
  </ Div>
 

In diesem Fall werden die Absätze im zweiten Block nicht ausgewählt div. Der Stil wird nur auf einen Absatz des ersten Blocks von div angewendet werden.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nur-of-Art

  li: nur-of-type {
  font-weight: bold;
  }
 

Diese Pseudo-Klasse wählt Elemente, die Geschwister nicht haben sie in einem Behälter enthalten. Zum Beispiel lassen Sie uns alle ul wählen, die eine einzige li enthalten.

Sie könnten ul li schreiben, aber diese Methode alle Elemente li wählen. Der einzige Weg - zu verwenden , nur-of-Typ.

  ul> li: nur-of-type {
  font-weight: bold;
  }
 

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: first-of-Art

Diese Pseudo-Klasse können Sie die ersten Geschwister des gleichen Typs zu wählen.

Um dies besser zu verstehen, kopieren Sie den folgenden Code in einem Editor:

  <Div>
  <P> Es Absatz. </ P>
  <Ul>
  <Li> Element 1. </ li>
  <Li> Element 2 </ li>
  </ Ul>

  <Ul>
  <Li> Element 3. </ li>
  <Li> Element 4. </ li>
  </ Ul>
  </ Div>
 

Nun, ohne weiter zu lesen, versuchen Sie, einen Stil zu geben nur "Element 2". Wenn Vermutung (oder aufgeben), lesen Sie weiter.

Lösung 1

Es gibt viele Wege, um dieses Problem zu lösen. Betrachten wir nur einige von ihnen. Beginnen wir mit dem Einsatz von First-of-Art starten:

  ul: first-of-type> li: n-te-Kind (2) {
  font-weight: bold;
  }
 

Dieser Code sagt: "Finden Sie die erste ungeordnete Liste auf der Seite, dann nur seine direkten Nachkommen finden, die dann nur die zweite in der Reihenfolge li Element wählen Elemente li sind .."

Lösung 2

Eine weitere Option - verwenden , um die benachbarten Wähler:

  p + ul li: last-child {
  font-weight: bold;
  }
 

Hier finden wir die ul, unmittelbar nach der Tag - Abschnitt, dann finden Sie das letzte seiner untergeordneten Element.

Lösung 3

Sie können immer noch ein wenig mit den Selektoren spielen und so zu tun:

  ul: first-of-Typ li: n-te-last-Kind (1) {
  font-weight: bold;
  }
 

Nun kommen wir bereits das erste ul - Element auf der Seite, und suchen Sie dann nach dem ersten Element li, aber vom Ende her.

Kompatibilität:

Internet Explorer	Chrom	Oper	Safari	Firefox	androide	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Abschluss

Wenn Sie immer noch Code zu schreiben, unter Berücksichtigung der Existenz von IE6, dann müssen Sie sehr vorsichtig sein, wenn neue Selektoren. Aber nicht diese Entschuldigung zu machen, sagen Sie nicht, dass Sie nicht wissen müssen - es wird das Leben schwer für sich selbst machen.

Wenn Sie mit einem der JavaScript-Bibliotheken wie jQuery arbeiten, versuche ich immer, die "native" zu verwenden, von CSS3-Selektoren, wann immer möglich. In diesem Fall läuft der Code schneller.

Memo CSS-Selektoren