Heim >Web-Frontend >CSS-Tutorial >Was sind CSS-Selektoren? Was sind die CSS-Selektoren?

Was sind CSS-Selektoren? Was sind die CSS-Selektoren?

青灯夜游
青灯夜游Original
2018-10-20 16:48:554317Durchsuche

Der Inhalt dieses Artikels soll Ihnen vorstellen, was CSS-Selektoren sind. Was sind die CSS-Selektoren? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

W3School Offline-Handbuch (Version 2017.03.11) herunterladen: https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

Der Selektor bezieht sich auf das zu ändernde Element. Zu den häufig verwendeten Selektoren in CSS gehören HTML-Selektor, Klassenselektor und ID-Selektor .

HTML-Selektoren

Der gebräuchlichste CSS-Selektor ist der Elementselektor. Mit anderen Worten: Die Elemente des Dokuments sind die grundlegendsten Selektoren.

Wenn Sie HTML formatieren, ist der Selektor normalerweise ein HTML-Element wie p, h1, em, a oder sogar HTML selbst.

Zum Beispiel:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

kann einen Stil von einem Element auf ein anderes umstellen.

Angenommen, Sie entscheiden sich dafür, den Absatztext oben (anstelle des h1-Elements) grau zu machen. Ändern Sie einfach den h1-Selektor auf p.

html {color:black;}h2 {color:silver;}

Klassenselektor

Im W3C-Standard werden Elementselektoren auch Typselektoren genannt.

„Der Typselektor entspricht dem Namen des Elementtyps der Dokumentsprache. Der Typselektor entspricht jeder Instanz dieses Elementtyps im Dokumentbaum.“

Das Format ist wie folgt:

selector.classname{
    property1:valu;
    property2:valu;
    ……
  }

Zum Beispiel:

p.left {font-family: sans-serif;}

ID-Selektor

Wenn Sie ein Element individuell gestalten müssen, können Sie den ID-Selektor verwenden , verwenden Sie den ID-Selektor. Der Selektor muss zunächst einen ID-Wert für das Objekt des Designstils definieren. Der ID-Selektor ist eindeutig und die ID-Werte verschiedener Elemente können nicht wiederholt werden.

Beispiel:

<p id="top"></p>

Definieren Sie den Stil des Oberteils:

#top{
  property1:value;
  property2:value;
  ……
}

html

nbsp;html>


<meta>
<title>CSS 常用选择器</title>
<link>



<!--
id 选择器
-通过id属性值选中唯一的元素
- #id属性名{}


class 类选择器
-通过类选择器,选中一组
-.class属性名{}

-->
<h1>HTML选择器</h1>
<p>css test</p>
<p>css test</p>
<p>css test</p>
<p>css test</p>


0923.css

h1{
    color: yellow;
}

#p1{
    color: aqua;
    font-size: 20px;
}
.p2{
      color: red;
      font-size:40px;
}

Zusammenfassung: Das Obige Ist dies der Fall? Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWas sind CSS-Selektoren? Was sind die CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn