Une introduction aux pseudo-éléments en CSS et leurs différences avec les pseudo-classes

Pseudo-éléments

Nous savons qu'avec l'amélioration continue des spécifications CSS, de plus en plus de nouveaux pseudo-éléments CSS ont été ajoutés, mais dans le développement quotidien, nous couramment utilisé et La situation de prise en charge du navigateur qui est plus optimiste est avant et après. Mais ce que nous utilisons dans le développement quotidien, c'est : après {content: ”;} pour effacer les flottants et ajouter un élément (en prenant soin de l'utilisation d'un seul deux-points dans les navigateurs IE8). Mais quelles sont les valeurs possibles du contenu). ?
1. Chaîne : contenu : « une chaîne » - Remarque : les caractères spéciaux doivent être codés en unicode ;
2 Image : contenu : url(/path/to/benjamin.png) - L'image est insérée. dans sa taille d'origine, ne peut pas être redimensionné. Étant donné que l'image prend en charge les dégradés, vous pouvez utiliser des effets de dégradé sur les pseudo-éléments
3 Aucun caractère : contenu : "" - Ceci est plus utile pour effacer les flottants et définir les images d'arrière-plan. peut définir la largeur et la hauteur de l'image d'arrière-plan, nous pouvons même utiliser l'attribut background-size pour ajuster la taille de l'image d'arrière-plan
4. il est plus utile pour définir le style du numéro de série de la liste ; voir le code suivant pour plus de détails :

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}

PS : Nous ne pouvons pas définir le contenu : "

Benjamin

> ;", il ne sera pas analysé comme des extraits de code HTML, mais sera analysé comme une chaîne ;
5. content: attr(attrName)
content peut utiliser la fonction attr pour obtenir la valeur de l'attribut, ce qui est particulièrement pratique lorsqu'il est utilisé dans des pseudo-classes. Voir le code suivant :

<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;   
    }   
    .list li span {   
        vertical-align: middle;   
    }   
    .list li:before {   
        content: attr(data-index);   
        display: inline-block;   
        width: 20px;   
        height: 20px;   
        text-align: center;   
        color: #fff;   
        vertical-align: middle;           
        background-color: #f00;   
        border-radius: 50%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>

Après avoir dit ce que j'ai dit précédemment, parlons des bugs rencontrés dans IE :
Bug. description : Utilisez des pseudo-classes pour implémenter le changement d'image ""/"-" en ajoutant et en supprimant la classe ouverte. Cependant, l'effet est étrange dans IE8 et ne peut pas être rendu correctement dans d'autres navigateurs :

.

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}   
/* 横向 */
.plus:before {   
    content: '';   
    position: absolute;   
    top: 10px;   
    left: 3px;   
    width: 14px;   
    height: 1px;   
    background-color: #fdaa47;   
    display: block;   
}   
/* 纵向 */
.plus:after {   
    display: block;   
    content: '';   
    width: 1px;   
    height: 14px;   
    background-color: #fdaa47;   
    position: absolute;   
    left: 10px;   
    top: 3px;   
}   
.opened:after {   
    top: -30px;   
}

Lors du passage de addClass('opened') et removeClass('opened') , pour changer les signes plus et moins : l'effet dans le navigateur IE8 n'est pas comme prévu, et certains styles ne le peuvent pas être couvert. La solution actuelle est la suivante :

<p class="parent">   
    <i class="plus"></i>   
</p>   
<script type="text/javascript">   
$(&#39;.parent&#39;).on(&#39;click&#39;, function() {   
    var $i = $(this).find(&#39;i&#39;),   
        className = $i.attr(&#39;class&#39;);   
    className = /opened/.test(className) ? &#39;plus&#39; : className +&#39; opened&#39;;   
    $i.replaceWith(&#39;<i class="&#39;+ className +&#39;""></i>&#39;);   
});   
</script>

Similitudes et différences entre pseudo-classes et pseudo-éléments
1. Les sélecteurs W3C CSS 2.1
ne font pas de distinction entre les pseudo-classes et les pseudo-éléments, les deux utilisent un deux-points
tel que
pseudo Classe : premier-enfant,
pseudo -element : first-line
PS : La spécification mentionne clairement l'ordre d'écriture de plusieurs pseudo-classes d'un lien :
A noter que le A:hover doit être placé après les règles A:link et A:visited, sinon, les règles en cascade masqueront la propriété 'color' de la règle A:hover. De même, comme A:active est placé après A:hover, la couleur active (citron vert) s'appliquera lorsque l'utilisateur active et survole le A. element.

2. Sélecteurs CSS niveau 3
Cette spécification fait une distinction entre les pseudo-classes et les pseudo-éléments. Utilisez un seul deux-points pour les pseudo-classes et un. double deux-points pour les pseudo-éléments.
Par exemple,
pseudo-class: first-child
pseudo-element:: first-line, ::first-letter, ::before, ::after
CSS 3 est ajouté sur le base de CSS2.1 Il existe de nombreuses pseudo-classes : cible, pseudo-classes pour le statut des éléments d'interface utilisateur : vérifié, etc., pseudo-classes structurelles : nth-child(), etc. Pour plus de détails, veuillez vous référer à la spécification.

3. Draft des sélecteurs CSS niveau 4
Cette ébauche ajoute de nombreuses nouvelles pseudo-classes, telles que celles liées au statut de contrôle d'entrée, au statut de valeur et aux pseudo-vérifications de valeur. -classes, pseudo-classes structurées en arbre, pseudo-classes structurées en grille, etc.

4. Module de pseudo-éléments CSS niveau 4 ——Première version de travail publique du W3C, 15 janvier 2015
Ajout de quelques pseudo-éléments, tels que :
Sélection du contenu en surbrillance : les pseudo-éléments ::selection, ::spelling-error et ::grammar-error,
Entrée d'espace réservé : le pseudo-élément ::placeholder.

5. Applications courantes
pseudo-classe :
1) un style de lien
2) changement de couleur entrelacé
pseudo-élément :
1 ) L'utilisation la plus courante du pseudo-élément après est d'effacer les flottants,
.fix{*zoom:1;}
.fix:after,.fix::after{display: block content; "clear" ; hauteur : 0 ; clear : les deux ; débordement : masqué ; visibilité : masquée ;🎜>2) espacement des lettres pour masquer le texte du bouton
3) Style de la première ligne et de la première lettre

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!