Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Stilauswahl, wird verwendet, um HTML-Elemente auf der Seite auszuwählen, um CSS-Stile hinzuzufügen.

Sortieren Sie nach der Rendering-Leistung von hoch nach niedrig Gefolgt von:

AUSWEIS Wähler #id

Wählen Sie Elemente anhand ihres ID-Attributs aus, wobei die Groß-/Kleinschreibung beachtet werden muss

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Die Verwendung wird jedoch nicht empfohlen, weil:

• Der ID-Selektor hat eine höhere Priorität und das Zurücksetzen des Stils ist unpraktisch.
• Der ID-Selektor wird hauptsächlich von JS verwendet

Klassenselektor .class

Über das Klassenattribut des ElementsStilBeim Klassennamen des ausgewählten Elements wird die Groß-/Kleinschreibung beachtet

Der am meisten empfohlene CSS-Selektor besteht darin, dass Klassenselektoren semantisch stark sind und sich der Stil leicht zurücksetzen lässt.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Mehrere Stilklassen können demselben Element hinzugefügt werden, getrennt durch Leerzeichen.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

Tag-Selektor 标签名

Wählen Sie Elemente anhand ihrer Tag-Namen aus, ohne Berücksichtigung der Groß- und Kleinschreibung

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Aufgrund der schlechten Leistung des Tag-Selektors und der hohen Wartungskosten nicht empfohlen

Wildcard-Selektor *

Wählen Sie alle HTML-Elemente auf der Seite mit Ausnahme von Pseudoelementen aus. Dies wird häufig zum Löschen des Standardstils des Browsers verwendet, wird jedoch nicht empfohlen, da es Leistung verbraucht.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

Attributselektor [属性]

Wählen Sie Elemente basierend auf ihren Attributen und Attributwerten aus. Bei Attributen wird die Groß-/Kleinschreibung nicht beachtet, und bei Attributwerten wird die Groß-/Kleinschreibung beachtet.

Pseudo-Klassenselektor :状态名

Wählen Sie Elemente basierend auf ihren unterschiedlichen Zuständen aus

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Verwenden Sie Pseudoklassenselektoren in Listen

n bedeutet 0,1,2,3,4,5,6,7,8 ... (Es ist ungültig, wenn n kleiner als 1 ist, da n = 0 nicht ausgewählt wird.)

Verwenden Sie Pseudoklassenselektoren in Tabellen

• tr:nth-child(odd)：Entspricht den Zeilen 1, 3 und 5 der Tabelle, was äquivalent isttr:nth-child(2n+1)。
• tr:nth-child(even): Entspricht den Zeilen 2, 4 und 6 der Tabelle, was äquivalent isttr:nth-child(2n)。

• Praktisches Beispiel für einen Pseudoklassenselektor

  • Verwenden Sie:nth-child(), um Zebrastreifen, Kantenausrichtung, Hervorhebung bestimmter Bereichslisten und dynamisches, adaptives Listenlayout zu implementieren
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS implementiert dynamisches Anzeigen und Ausblenden (die wunderbare Verwendung von :checked und :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Verwendung: Ziel zum weiteren Erweitern, Reduzieren und Tabulatorwechselhttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Verwenden Sie:placeholder-showed, um eine Interaktion im MaterialDesign-Stil zu erreichen
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Verwenden Sie:placeholder-showed, um den Nullwert zu überprüfen. Die Eingabeaufforderung darf nicht leer sein
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked implementiert Erweiterung und Reduzierung
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked implementiert den Tab-Wechsel
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked implementiert benutzerdefinierte Optionsfelder, Kontrollkästchen, Schalter, Beschriftungsprüfungen und Materialauswahlmöglichkeiten
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Verwenden Sie :valid und :invalid, um die native Formularvalidierung zu implementieren
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Verwenden Sie :required und :optional, um den Eingabeaufforderungstext für die Formularüberprüfung zu implementieren
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within implementiert Dropdown-Liste
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Wenn das Eingabefeld fokussiert ist, markieren Sie die Beschriftung davor (siehe Methode 5 im Link).
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Bewegen Sie die Maus, um das vergrößerte Bild anzuzeigen, oder klicken Sie mit der Maus, um das vergrößerte Bild anzuzeigen
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty verbirgt leere Elemente und fehlende Felder. Intelligente Tipps
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child implementiert eine dynamische Ladeanimation mit mehreren Zuständen
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen ermöglicht die Vollbildanzeige angeklickter Bilder
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Pseudoelementselektor ::

  Wird verwendet, um einen Teil eines Elements und nicht das gesamte Element auszuwählen und zu formatieren

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before Und::after

  Es muss zusammen mit dem Inhaltsattribut verwendet werden, um den Inhalt vor und nach dem Element festzulegen. Weitere Informationen finden Sie unter
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Häufig verwendete praktische Beispiele:

  • Fügen Sie Symbole vor und nach Elementen hinzu (die Magie von ::before und ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS verwendet geschickt ::after und ::before, um die vertikale Kategoriennavigation zu implementieren
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • CSS verwendet geschickt ::after, um eine Tab-Wechsel-Animation zu erreichen
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Initialen

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line erste Reihe

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Ziehen Sie die Maus, um den Bereich auszuwählen

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder Textplatzhalter

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Beziehungsauswahl

  Wählen Sie Elemente basierend auf Beziehungen zwischen Elementen aus

  Nachkommenselektor >

  Das in ein Tag eingeschlossene Tag der ersten Ebene ist sein Nachkomme

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  Nachkommenselektor 空格

  Alle Tags innerhalb eines Tags sind seine Nachkommen

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  Geschwisterauswahl ~

  Wählen Sie unter demselben übergeordneten Element das angegebene Element ausnachAlle Elemente sind auf derselben Ebene, so dass sie streng genommen aufgerufen werden sollten 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS-Nr 前面兄弟选择器 , können Sie auf den folgenden Link verweisen, um die Implementierung zu simulieren
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  Nachbar-Geschwister-Selektor +

  Wählt das nächste Element aus, das unmittelbar auf ein Element folgt

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Kreuzungsauswahl

  Wählen Sie Elemente auf der Seite aus, die mit mehreren Selektoren gleichzeitig übereinstimmen

  • Es gibt keine Leerzeichen zwischen Selektoren (Leerzeichen sind untergeordnete Selektoren).
  • Wenn ein Tag-Selektor vorhanden ist, muss der Tag-Selektor zuerst platziert werden

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Union-Selektor ,

  Unter mehreren Selektoren wird einer ausgewählt, solange einer davon erfüllt ist.

  • Wird zwischen mehreren Selektoren verwendet , separate

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4