Maison > interface Web > tutoriel CSS > Sélecteur CSS simple - Sélecteur régulier

Sélecteur CSS simple - Sélecteur régulier

无忌哥哥
Libérer: 2018-06-29 15:18:50
original
1607 Les gens l'ont consulté

Sélecteur CSS simple - sélecteur régulier

* Il existe 5 sélecteurs CSS réguliers

* sélecteur de balise tag : $('div'), sélectionne en fonction du nom de la balise, renvoie une collection

* sélecteur d'identifiant : $('#top'), sélectionne en fonction de l'attribut id de l'élément, renvoie un seul

* sélecteur de classe : $('.active'), sélectionne en fonction de la sélection d'attribut de classe d'élément, renvoie la collection

* *Sélecteur de caractères génériques : $('*'), sélectionne tous les éléments, renvoie la collection

* sélecteur de groupe : $('p, h2 , li'), sélectionnez plusieurs éléments différents en même temps et renvoyez la collection

<!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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal