recherche

Maison >interface Web >tutoriel CSS >Connaissance détaillée du sélecteur CSS

Connaissance détaillée du sélecteur CSS

迷茫
迷茫original
2017-03-25 14:01:411519parcourir

Comment importer une feuille de style CSS externe

  1. Utiliser la balise de lien pour importer une feuille de style CSS externe
    ffd44f9d753d16fbc49420bd2e72052b

  2. Dans style Dans le tableau, importer (importer) une feuille de style externe
    @import url("/crazy-html5/06css/css/demo01.css");

Utiliser une feuille de style interne

La feuille de style interne ne peut être appliquée qu'à un certain page web, comment la définir Pour ajouter la balise head à l'en-tête style, vous pouvez ajouter le style de la page dans la balise style. 

<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 contenant un certain 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. représente un élément qui contient un attribut et la valeur de l'attribut commence par une valeur spécifique
    . p[id=^aaa]{background:red;} représente Contient l'attribut id, et la valeur de l'id est un élément p commençant par aaa

  5. Un é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'id, spécifiant l'élément dont l'id est une valeur spécifique, telle que #myp signifie est un élément où id est un élément avec une valeur myp Le symbole #

doit être ajouté devant l'identifiant. sélecteur. Le sélecteur de classe

. est un élément qui correspond à la valeur de la classe. Le sélecteur Le symbole .myclass doit être ajouté devant. Par exemple, class représente tous les éléments dont la valeur myclass est .

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

contient des sélecteurs et des sélecteurs descendants

Le sélecteur descendant

peut sélectionner des éléments qui sont les descendants d'un certain élément, par exemple : h1 em{color:red}, cette règle sélectionnera h1 élément. >Le texte de l'élément devient rouge et les autres textes em ne seront pas affectés par cette règle. Le em

Le sélecteur enfant

est similaire au sélecteur descendant, mais il n'affecte que certains descendants directs de l'élément. Par exemple,

agit sur l'élément h1>strong{color:red;} de premier niveau dans l'élément h1, et les autres niveaux ne sont pas affectés strong

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

Si vous devez sélectionner. un autre élément immédiatement Pour les éléments après un élément, et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur de frère adjacent. Par exemple,

sélectionne le paragraphe qui apparaît immédiatement après l'élément h1. Les éléments h1 et p ont le même. élément parent h1+p{margin-top:50px;}

Regroupement de sélecteurs

Sélecteurs qui agissent sur plusieurs éléments en même temps. Par exemple,

agira à la fois sur l'élément h2 et l'élément p. h2,p{color:gray;}* est un sélecteur de caractère générique qui peut correspondre à n'importe quel élément

Sélecteur de pseudo-éléments

  1. Définir un style spécial pour la première ligne de texte:first-line{color:red;}

  2. Style spécial pour la première lettre du texte:first-letter{color:red;}

Désélecteur:after、:before

Peut être utilisé avec des éléments Le contenu peut être inséré devant le contenu. Le contenu peut être spécifié avec :before{} content peut être inséré après le contenu de l'élément. comme
:after{}content

after , before peut être utilisé avec 
p:before{
    content:url("img.png");}
,

peut être utilisé avec la définition du type de guillemet des références imbriquées quotesquotes

après, avant peuvent être utilisés avec des compteurs 
<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }</style>

Au lieu d'utiliser un compteur pour ajouter des nombres à plusieurs niveaux devant le texte, cela peut être un article séparé et ne sera pas détaillé ici. Sélecteur de pseudo-classe

    Le sélecteur correspond à l'élément racine du document

  1. :root

    2. Spécifie quand l'élément is Le style du premier enfant de son parent

  2. :first-child

    3. précise le style lorsque l'élément est le dernier enfant de son parent

  3. :last-child

    4. Spécifie un style lorsque l'élément est le nième enfant de son parent

  4. :nth-child(n)

    5. n est
      Correspond lorsque l'élément est un enfant impair de son parent Le style de

    1. odd

      n est
      2. correspond au style de

    2. even

      n lorsque n est
      3. , correspond lorsque l'élément est son parent qui correspond le style de l'enfant m*n+p

    3. m*n+p

    précise quand l'élément est le nième enfant depuis le dernier jusqu'à son parent Le style de

  5. :nth-last-child(n)

    6. spécifie le style qui prend effet lorsque l'élément est le seul élément enfant de son parent

  6. :only-child

    7. spécifie le style de l'élément vide

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

  1. :hoverStyle lorsque le pointeur de la souris est sur l'élément

  2. :focusStyle pour l'élément ciblé

  3. :enabledStyle pour l'élément activé

  4. :disabledStyle pour l'élément désactivé

  5. :checkedStyle pour l'élément désactivé

  6. ::selectionLe style de l'élément sélectionné (case à cocher, radio)

  7. :not(selector)Le style de certains éléments sélectionnés par l'utilisateur

  8. :targetSélectionnez un style qui n'est pas ce sélecteur

Sélectionnez 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：Explication détaillée de CSS modifiant le style de sélection unique et de sélection multiple d'entréeArticle suivant：Explication détaillée de CSS modifiant le style de sélection unique et de sélection multiple d'entrée

Articles Liés

Voir plus