Maison > Article > interface Web > Explication détaillée de plusieurs exemples de sélecteurs CSS courants

Explication détaillée de plusieurs exemples de sélecteurs CSS courants

伊谢尔伦original: 2017-05-30 13:36:112192parcourir

Comment importer une feuille de style CSS externe

Utiliser la balise link pour importer une feuille de style CSS externe

<link rel="stylesheet" href="css/demo01.css">

Importer (importer) le style externe feuille dans la feuille de style

@import url("/crazy-html5/06css/css/demo01.css");

Utiliser la feuille de style interne

La feuille de style interne ne peut être appliquée qu'à une certaine page Web. La méthode de définition consiste à ajouter. la balise de style dans l'en-tête et dans la balise de style. Vous pouvez ajouter des styles de page dans .

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

Points de connaissance du sélecteur

Sélecteur d'attribut d'élément

1) Sélecteur de balise ordinaire

table:{background:red;}

2) Une balise contenant un certain attribut

p[id]{background:red;} représente un élément p contenant un attribut id

3) Une balise qui contient un attribut et la valeur de l'attribut est une valeur spécifique

p[id=aaa]{background:red;} représente un élément p qui contient un attribut id et id=aaa

4) Les éléments qui contiennent un attribut et la valeur de l'attribut commencent par une valeur spécifique

p[id=^aaa]{background:red;} signifie qu'il contient l'attribut id et la valeur du id commence par aaa L'élément p au début

5) L'élément qui contient un attribut et la valeur de l'attribut se termine par une valeur spécifique

p[id=$c]{background:red ;} signifie qu'il contient l'attribut id, et La valeur de id est un élément p se terminant par c

Sélecteur d'ID

sélecteur d'identifiant, qui spécifie l'élément dont l'identifiant est une valeur spécifique, par exemple, #myp représente l'id. Pour les éléments avec la valeur myp, le symbole #

Class selector

doit être ajouté devant le sélecteur d'id . Le sélecteur de classe est un élément qui correspond à la valeur de la classe et doit être ajouté devant le sélecteur. Le symbole ., par exemple, .myclass représente tous les éléments dont la valeur de classe est maclasse.

Les sélecteurs de classe peuvent être utilisés en combinaison avec des sélecteurs d'éléments. Par exemple, p.important{color:red;} doit remplir les conditions des deux sélecteurs pour prendre effet.

Contient des sélecteurs et des sélecteurs descendants

Les sélecteurs descendants peuvent sélectionner des éléments qui sont les descendants d'un élément, par exemple : h1 em{color:red}, cette règle tournera le texte de l'élément em qui est un descendant de l'élément h1 en rouge. Les autres textes em ne seront pas affectés par cette règle.

Le sélecteur enfant

est similaire au sélecteur descendant, mais il n'affecte que certains descendants directs de l'élément. Par exemple, h1>strong{color:red;} agit sur l'élément fort de premier niveau dans l'élément h1, et les autres niveaux ne sont pas affectés

Sélecteur de frères et sœurs adjacents

Si vous devez sélectionner un élément immédiatement après un autre élément et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur frère adjacent, tel que h1+p{margin-top:50px;} pour sélectionner l'élément immédiatement après h1. Dans le paragraphe qui apparaît, les éléments h1 et p ont le même élément parent

Regroupement de sélecteurs

Sélecteurs qui agissent sur plusieurs éléments en même temps, comme h2, p{color :gray;} affectera à la fois l'élément h2 et l'élément p.

* est un sélecteur générique qui peut correspondre à n'importe quel élément

Sélecteur de pseudo-élément

1) : première ligne{color:red }Set; un style spécial pour la première ligne de texte

2):first-letter{color:red;}Définir un style spécial pour la première lettre du texte

:after, :before sans sélecteur

:before{} peut être utilisé pour insérer du contenu devant l'élément content. Le contenu peut être spécifié par content

:after{} peut être utilisé pour insérer du contenu après l'élément. contenu. Le contenu peut être spécifié par contenu, tel que

p:before{
    content:url("img.png");
}

après et avant peuvent être utilisés avec des guillemets, et les guillemets peuvent être utilisés avec des compteurs pour définir le type de guillemets des références imbriquées

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }
</style>

après et avant

Vous pouvez utiliser un compteur pour ajouter des nombres à plusieurs niveaux devant le texte. Cela peut être un article spécial, et. Je n'entrerai pas dans les détails ici.

Sélecteur de pseudo-classe

1 : le sélecteur racine correspond à l'élément racine du document

2 :premier enfant spécifie quand l'élément est son parent. style du premier enfant

3 :last-child spécifie le style du dernier enfant lorsque l'élément est son parent

4 :nth-child(n) spécifie le style lorsque l'élément est Le style du nième enfant de son parent

Lorsque n est impair, il correspond lorsque l'élément est un enfant impair de son parent

Lorsque n est pair, il correspond lorsque l'élément est un nombre pair du style de son enfant parent

Lorsque n est m*n+p, correspond à l'élément dont le parent correspond au style de l'enfant m*n+p-ème

5 :nt- last-child (n) Spécifie le style qui prend effet lorsque l'élément est le n-ème enfant à partir du bas de son parent

6 :only-child spécifie le style qui prend effet lorsque l'élément est le seul élément enfant de son parent

7 :empty Spécifie le style des éléments vides

Sélecteur de pseudo-classe pour l'état de l'élément

1 :hover Style when le pointeur de la souris est sur l'élément

2 :focus Le style de l'élément focus

3 :enabled Le style de l'élément activé

4 :disabled Le style de l'élément activé élément désactivé

5 :checked Le style de l'élément sélectionné (checkbox, radio)

6 ::selection Le style de certains éléments sélectionnés par l'utilisateur

7 :not (sélecteur) sélectionnez le style qui n'est pas ce sélecteur

8 :target selection L'élément #news actuellement actif, généralement utilisé avec les ancres

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!

Déclaration：

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

Article précédent：Résumé de la façon de résoudre les problèmes de compatibilité du navigateur CSSArticle suivant：Résumé de la façon de résoudre les problèmes de compatibilité du navigateur CSS

Articles Liés

Voir plus