Connaissance détaillée du sélecteur CSS-tutoriel CSS-php.cn

Connaissance détaillée du sélecteur CSS

迷茫

Libérer： 2017-03-25 14:01:41

original

1509 Les gens l'ont consulté

Comment importer une feuille de style CSS externe

Utiliser la balise de lien pour importer une feuille de style CSS externe
<link rel="stylesheet" href="css/demo01.css">
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>

Copier après la connexion

Points de connaissance du sélecteur

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

Sélecteur de balise ordinaire
table:{background:red;}
Une balise contenant un certain attribut
p[id]{background:red;}Représente un élément p contenant un attribut id
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
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
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 <🎜 qui sont les descendants du 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

Définir un style spécial pour la première ligne de texte:first-line{color:red;}
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");}

Copier après la connexion

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>

Copier après la connexion

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

:root
:first-child
:last-child
:nth-child(n)