Heim > Artikel > Web-Frontend > Einfacher CSS-Selektor – Regulärer Selektor

Einfacher CSS-Selektor – Regulärer Selektor

无忌哥哥Original: 2018-06-29 15:18:501541Durchsuche

Einfacher CSS-Selektor – regulärer Selektor

* Es gibt 5 reguläre CSS-Selektoren

* Tag-Tag-Selektor: $('div'), entsprechend dem Tag-Namen auswählen, Gibt eine Sammlung zurück

* ID-Selektor: $('#top'), wählt basierend auf dem ID-Attribut des Elements aus, gibt ein einzelnes zurück

* Klassenselektor: $('.active'), wählt basierend auf aus Auswahl des Elementklassenattributs, gibt die Sammlung zurück

* *Platzhalterselektor: $('*'), wählt alle Elemente aus, gibt die Sammlung zurück

* Gruppenselektor: $('p, h2 , li'), wählen Sie mehrere verschiedene Elemente gleichzeitig aus und geben Sie die Menge zurück

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1简单的CSS选择器-常规选择器</title>
</head>
<body>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
<h2 id="green">id选择器</h2>
<h2>类选择器</h2>
<h2>类选择器</h2>
<p>我是一个段落</p>
<li>我是一个列表项</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//1.标签选择器:选择页面中具有相同标签名称的元素,返回集合
$(&#39;h2&#39;).css(&#39;color&#39;, &#39;red&#39;)
//2.id选择器: 根据标签中的id属性来选择元素,返回单个
$(&#39;#green&#39;).css(&#39;color&#39;, &#39;green&#39;)
//3.类选择器: 也叫class选择器,根据标签中的class属性来选择元素,返回集合
$(&#39;.blue&#39;).css(&#39;color&#39;, &#39;blue&#39;)
//4.通配选择器: 选择所有的元素,返回集合
$(&#39;body *&#39;).css(&#39;background-color&#39;, &#39;wheat&#39;)
//5.群组选择: 同时选择多个不同类型的元素,返回集合
$(&#39;h2.blue, p, li&#39;).css(&#39;border&#39;, &#39;2px solid red&#39;)
</script>

Das obige ist der detaillierte Inhalt vonEinfacher CSS-Selektor – Regulärer Selektor. 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

Vorheriger Artikel：Tipps zum Löschen von Floats zwischen hierarchischen CSS-ElementenNächster Artikel：Tipps zum Löschen von Floats zwischen hierarchischen CSS-Elementen

In Verbindung stehende Artikel

Mehr sehen