Maison > Article > interface Web > Utiliser des pseudo-classes CSS
Utiliser des pseudo-classes CSS
- 王林avant
- 2023-09-03 18:41:011196parcourir
Nous pouvons ajouter des styles spécifiques aux éléments existants en HTML à l'aide de pseudo-classes CSS, ces pseudo-classes sélectionnent des éléments avec des états spécifiques tels que (survol, accès, désactivé, etc.)
REMARQUE strong> - Afin de combiner les pseudo-classes CSS -les classes avec des pseudo-éléments sont séparées. En CSS3, les pseudo-classes utilisent une notation à deux points.
Syntaxe
Voici la syntaxe d'utilisation des pseudo-classes CSS sur un élément-
Selector:pseudo-class {
css-property: /*value*/;
}Voici toutes les pseudo-classes CSS disponibles-
| Sr.No | pseudo-classe et description |
|---|---|
| 1 | Activités Il sélectionne les éléments mentionnés par les activités |
| 2 |
coché Il sélectionne les éléments mentionnés par chaque coché |
|
Désactivé Il sélectionne chaque élément mentionné désactivé td> |
|
| 4 |
vide Il sélectionne chaque élément mentionné qui n'a pas d'enfant |
| 5 |
activé Il sélectionne chaque élément mentionné qui est activé |
| 6 |
premier-enfant Il sélectionne chaque élément mentionné qui est le premier enfant de son parent |
| 7 |
premier-de-type Il sélectionne chaque élément mentionné en premier de son élément parent |
| 8 |
Focus Il sélectionne celui ci-dessus qui a le focus Element |
| 9 td> |
Hover Sélectionne les mentions au survol de la souris |
| 10 |
Dans la plage Il sélectionne les mentions de valeurs dans la plage spécifiée Élément |
| 11 |
Invalid Il sélectionne tous les éléments mentionnés avec valeur invalide
|
| 12 |
lang (langue) Il sélectionne chaque mention d'un élément dont la valeur de l'attribut lang commence par "langue" |
| 13 |
last-child il sélectionne comme dernier enfant de son parent |
| 14 |
dernier de type Il sélectionne chaque élément mentionné en dernier par son parent |
| 15 |
Lien Il sélectionne tous les éléments mentionnés non visités |
| 16 |
not(selector) Il sélectionne tous les éléments qui ne sont pas mentionnés |
| 17 |
ntième enfant(n) Il sélectionne le nième enfant comme parent Il sélectionne chaque élément mentionné comme nième enfant de son parent, en commençant par le dernier L'enfant commence à compter |
| 19 |
ntième-dernier -oftype(n) Il sélectionne chaque élément mentionné, c'est-à-dire le nième élément mentionné dans son parent, en commençant par le dernier enfant. Les éléments commencent à compter |
| 20 |
ntième de type(n) Il sélectionne chaque élément mentionné comme étant le nième élément mentionné dans son parent |
| 21 | uniquement de type Il sélectionne chaque élément mentionné comme seule mention de son élément parent |
| 22 |
enfant unique Il sélectionne comme seul élément enfant Chaque élément mentionné a son parent |
| 23 |
optionnel Il sélectionne l'élément ci-dessus sans l'attribut "obligatoire" |
| 24 |
hors plage Il sélectionne les éléments mentionnés avec des valeurs en dehors de la plage spécifiée |
| 25 td> |
lecture seule Il sélectionne les éléments mentionnés en utilisant l'attribut spécifié "lecture seule" |
| 26 |
read-write it sélectionne les éléments mentionnés sans l'attribut "readonly" |
| 27 |
requure it sélectionne les éléments mentionnés qui ont l'attribut "requis" spécifié |
| 28 |
root Il sélectionne l'élément racine du document
|
| 29 |
Target Il sélectionne l'élément actuellement mentionné élément actif (cliquez sur l'URL contenant cet élément) nom de l'ancre) |
| 30 |
有效 它选择具有有效值的所有提到的元素 |
| 31 |
访问过 它选择所有访问过的提到的元素 | tr>
示例
让我们看一个 CSS 伪类的示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>输出
这将产生以下输出 -
示例
让我们看一下 CSS 伪类的另一个示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>输出
这将产生以下输出 -
当未将鼠标悬停在 div 元素上时 -
当鼠标悬停在 div 元素上时 -
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!