Appliquez des styles aux éléments HTML avec des attributs spécifiques à l'aide des sélecteurs d'attributs en CSS. Les règles suivantes s'appliquent aux sélecteurs d'attributs.
p[lang] - Sélectionne tous les éléments de paragraphe avec l'attribut lang.
p[lang="fr"] - Sélectionne tous les éléments de paragraphe dont la valeur de l'attribut lang est exactement "fr".
p[lang~="fr"] - Sélectionne tous les éléments de paragraphe dont la valeur de l'attribut lang contient le mot "fr".
p[lang|="en"] - Sélectionne tous les éléments de paragraphe dont la valeur de l'attribut lang est entièrement "en" ou commence par "en-".
Voici le code pour styliser un formulaire à l'aide de sélecteurs d'attributs CSS :
Démonstration
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
width: 300px;
display: block;
margin-bottom: 10px;
background-color: rgb(195, 250, 247);
font-size: 18px;
padding: 15px;
border: none;
}
input[type="submit"] {
padding: 10px;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(75, 163, 16);
color: white;
}
input[type="password"] {
width: 300px;
padding: 10px;
background-color: red;
color: white;
border: none;
}
</style>
</head>
<body>
<h1>Css attribute selector example</h1>
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">Password:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Le code ci-dessus produira le résultat suivant −
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!
Quels sont les DNS couramment utilisés ?
Comment utiliser la porte dérobée Shift
Comment résoudre le problème de l'absence d'accès à Internet lorsque l'ordinateur est connecté au wifi
Explication détaillée de la configuration de nginx
qu'est-ce qu'un programme vb
Quelle est la différence entre ibatis et mybatis
Combien coûte un Bitcoin en RMB ?
Comment utiliser la fonction fréquence
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
