Introduction aux types et à l'utilisation des sélecteurs CSS

Les plus couramment utilisés incluent les sélecteurs de balises, les sélecteurs de classe, les sélecteurs d'ID, etc. En fait, il y en a bien d'autres. Dans l'article suivant, nous présenterons en détail les types et les utilisations de ces sélecteurs

Tout d'abord. , parlons des principaux sélecteurs
1. Sélecteur de balise (tel que : body, p, p, ul, li)
2. Sélecteur de classe (tel que : class="head", class=" head_logo" )
3. Sélecteur d'ID (tel que : id="name", id="name_txt")
4. Sélecteur global (tel que : * number)
5. head .head_logo, notez que les deux sélecteurs sont séparés par la barre d'espace)
6 Héritez du sélecteur (tel que : p p, notez que les deux sélecteurs sont séparés par la barre d'espace)
7. sélecteur (par exemple : c'est le style de lien, pseudo-classe d'un élément, 4 états différents : lien, visité, actif, survol. )
8. Sélecteurs d'attributs pour la correspondance de chaînes (^ $ * trois types, correspondant à début, fin et inclusion)
La manière d'écrire style=" " dans la balise doit être une façon d'introduire du CSS, pas un sélecteur, car le sélecteur n'est pas du tout utilisé.
Regardons ces sélecteurs séparément :
1 : Sélecteur de nom de balise
Il existe de nombreuses balises dans un document XHTML, telles que les balises p, les balises h1, etc. Pour que toutes les balises p du document utilisent le même style CSS, vous devez utiliser le sélecteur de balises.

p {color:red;border:1px blue solid;} 
p {color:#000;}

2 : Sélecteur de classe
Utilisez le sélecteur de balise pour spécifier le même style CSS pour la même balise dans l'ensemble du document XHTML. Mais dans l’application réelle, la même balise dans le document XHTML sera utilisée à plusieurs reprises. Si vous souhaitez attribuer différents styles CSS à la même balise, vous devez utiliser des sélecteurs de classe.

<p class="test">测试代码</p> 
.test {color:red;border:1px blue solid;}

Dans le document html, nous ajoutons class="xxx" à la balise d'ouverture de la balise pour contrôler le style (les balises non appariées telles que input sont placées directement dans la balise), et ajoutons class="xxx" vers le css correspondant sur la page Dans le fichier, vous pouvez utiliser .xxx pour pointer vers cette balise afin de contrôler cette balise. Nous appelons cette façon de trouver des balises en définissant des classes : les sélecteurs de classe.

Cette façon de définir la classe est le sélecteur le plus couramment utilisé dans le développement front-end. Elle possède plusieurs fonctionnalités exceptionnelles : vous pouvez définir la même classe pour différentes balises, utilisant ainsi une seule commande CSS pour contrôler plusieurs balises, réduisant ainsi le nombre de balises. une grande partie du code est que la page est simple à modifier, facile à maintenir et facile à réviser ; deuxièmement, le personnel d'arrière-plan n'utilisera pas les paramètres pertinents de la classe et il n'est pas nécessaire d'interagir avec le personnel d'arrière-plan ; de plus, l'étiquette peut être modifiée dynamiquement via js, etc. Classname, modifiant ainsi le style de l'ensemble de l'étiquette, facilitant ainsi la mise en œuvre d'effets dynamiques frontaux.
3 : Sélecteur d'ID
Le sélecteur d'ID est similaire au sélecteur de classe. La différence est que le sélecteur d'ID ne peut pas être réutilisé. Dans un document XHTML, un sélecteur d'ID ne peut attribuer son style CSS qu'à une seule balise.

<p id="test">测试代码</p> 
#test {color:red;border:1px blue solid;}

Les éléments HTML avec des identifiants peuvent être manipulés par JavaScript. Les identifiants sont également couramment utilisés par les développeurs back-end, les développeurs front-end doivent donc les utiliser le moins possible.
4. Sélecteur global
Le sélecteur global est un astérisque. Il fonctionne sur tous les éléments du document XHTML.

*{margin:0; padding:0;}

5. Sélecteurs combinés
Les sélecteurs de balises, les sélecteurs de classe et les sélecteurs d'ID peuvent être utilisés en combinaison. La méthode de combinaison générale est la combinaison du sélecteur de balise et du sélecteur de classe, ainsi que la combinaison du sélecteur de balise et du sélecteur d'ID. Puisque les principes et les effets de ces deux méthodes de combinaison sont les mêmes, seule la combinaison du sélecteur de balises et du sélecteur de classe est introduite. Le sélecteur de combinaison n'est qu'une forme de combinaison et non un véritable sélecteur, mais il est souvent utilisé dans la pratique.
Par exemple, .orderlist li {xxxx} ou .tableset td {}
Lorsque nous l'utilisons, il est généralement utilisé dans certaines balises qui apparaissent de manière répétée et ont le même style, comme li td dd, etc.
Par exemple

H1.red {color: red}
Sélecteur de groupe

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

Le sélecteur de groupe est en fait une manière simplifiée de en écrivant du CSS, il rassemble simplement différents sélecteurs avec la même définition, économisant ainsi beaucoup de code.
6. Sélecteurs hérités
Pour apprendre à utiliser les sélecteurs hérités, vous devez d'abord comprendre l'arborescence des documents et l'héritage CSS. Chaque XHTML peut être considéré comme une arborescence de documents. La racine de l'arborescence de documents est la balise html et les balises head et body sont ses éléments enfants. Les autres balises dans le head et le body sont les éléments petits-enfants de la balise html. L'ensemble du XHTML présente une relation arborescente entre ancêtres et descendants. L'héritage CSS signifie que les éléments descendants héritent de certains attributs des éléments ancêtres. Ce qui suit explique ces deux concepts CSS importants en détail à travers des exemples.
Sélecteur d'héritage CSS de l'arborescence des documents

<p class="test"> 
<span><img src="xxx" alt="示例图片"/></span> 
</p> 
.test span img {border:1px blue solid;} 
p span img {border:1px blue solid;}

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。

<span style="font-size:18px;"><style type="text/css"> 
p[title^="val"] {color:#FF0000;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="value">匹配具有att属性、且值以val开头的E元素</p> 
</p></span>

语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素

<style type="text/css"> 
p[title$="val"] {font-weight:bold;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p> 
</p> 
</body>

语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。

<style type="text/css"> 
p[title*="val"] {text-decoration:underline;} 
</style> 
<title>子串匹配的属性选择符 E[att*="val"]</title> 
</head> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p> 
</p> 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS background的使用方法

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!