Lektion03_02 Style Rule Selector_Grundlegendes Tutorial

Stilregelauswahl

Autor: Loncer Weitere Lernressourcen finden Sie unter: wwww.loncer.cn

• HTML-Selektor

  ist das als Selektor verwendete HTML-Tag, sodass auf allen Webseiten, auf denen CSS angewendet wird, alle HTML-Tags gemäß den definierten Anweisungen angezeigt werden

  Klassenselektor
• Um jedes durch ein HTML-Tag erstellte Webseitenelement in mehrere Kategorien zu unterteilen, legen Sie die Klasse dieses HTML-Tags auf unterschiedliche Werte fest:
  Zum Beispiel:
  

  ---

  p1

  例如:
  

  ---

  p1

  
  

  p2

  
  

  p3

  样式定义如下:
  

  p2

  p3

  Der Stil ist wie folgt definiert:

  Hinweis: Wenn der Selektor in definiert ist Das Stylesheet, direkt gefolgt vom Klassennamen (.), gilt diese Stilregel für alle HTML-Tags mit class=diesem Klassennamen. Das heißt, der Klassenselektor ist in zwei Kategorien unterteilt:

• 网页中:
  text here

  样式定义如下:
  

• 
  Zugehöriger Klassenselektor: HTML-Tag-Name (für dasselbe Element können verschiedene Regeln definiert werden).
  Unabhängiger Klassenselektor: .Klassenname (die gleichen Stilregeln können für verschiedene Elemente definiert werden).
  ID-Selektor Das ID-Attribut wird verwendet, um ein bestimmtes HTML-Element zu definieren. Nur ein Element in einer Webseitendatei kann einen bestimmten ID-Wert verwenden.

  Auf der Webseite:
  Text hier

  Der Stil ist wie folgt definiert:

  
  Assoziative Selektoren beziehen sich auf eine Zeichenfolge, die aus zwei oder mehr einzelnen Selektoren besteht, die durch ein Leerzeichen getrennt sind Zum Beispiel: p em {Hintergrund: gelb🎜>wobei „p em“ Es ist der Assoziationsselektor, Das bedeutet, dass der Hintergrund des Inhalts zwischen dem -Tag-Paar gelb ist und der Inhalt im -Tag-Paar nicht betroffen ist Hinweis: Regeln, die durch zugehörige Auswahlen definiert werden, haben eine höhere Priorität als Regeln, die durch einen einzelnen Selektor definiert werden.

  常用的伪元素如下

  元素名	作用
  A:active	选中超链接时的状态
  A:hover	光标移动到超链接上的状态
  A:link	没有任何动作时的状态
  A:visited	访问过的超链接状态
  P:first-line	段落中的第一行文本
  P:first-letter	段落中的第一个字母

  
  Kombinierte Selektoren Um wiederholte Deklarationen in Stylesheets zu reduzieren, können mehrere Selektoren in einer Stilregeldefinition kombiniert werden Beispiel: H1, H2, H3, H4, H5, H6, TD{color:red}.
  Pseudoelementselektor bezieht sich auf eine Möglichkeit, verschiedene Zustände desselben HTML-Elements und eines Teils des darin enthaltenen Inhalts zu definieren
Das Format ist wie folgt: HTML-Element: Periodische Pseudoelement-Attribute: Wert🎜>

Der Klassenselektor kann mit Pseudoelementen verwendet werden: HTML-Element: Pseudoelement {Attribut: Wert}