Comment utiliser le: not () sélecteur en CSS3 - les nuls

Dans certains cas, il est plus facile de sélectionner des objets dans CSS3 en fonction des caractéristiques qu'ils n'ont pas . Pour ce faire, vous pouvez utiliser un: pas (sélecteur). Par exemple, vous souhaiterez peut-être modifier la mise en forme de tous les objets qui ne figurent pas dans une balise

Dans ce cas, vous pouvez créer une liste d'étiquettes à l'aide du sélecteur de virgules et espérer que votre liste est complète, ou vous pouvez simplement utiliser le sélecteur: not (). Par exemple,: not (p) sélectionne chaque objet qui n'est pas une balise

. Vous pouvez également créer des sélections complexes à l'aide du sélecteur: not (): Un sélecteur de: not (div> p), par exemple, sélectionne toutes les balises

qui n'ont pas de balise parent.

Même avec cette courte liste de sélecteurs de tag, vous pouvez voir que CSS est assez flexible lorsque vous travaillez avec des tags. Voir les sélecteurs en action vous aidera à mieux les comprendre. La procédure suivante montre comment utiliser les différentes balises:

1. Créer ExternalCSS. HTML et ExternalCSS. Fichiers CSS et copiez-les dans un nouveau dossier.

2. Ouvrir ExternalCSS. HTML

3. Tapez le code suivant après la balise

   existante dans le fichier et enregistrez les modifications sur le disque.

   Texte dans une DIV.
   Texte avec un parent DIV.
   Texte après un DIV.
   Plus de texte après un DIV.
   

   Ce code ajoute simplement des étiquettes dans des arrangements spécifiques afin que vous puissiez tester les différents sélecteurs. Si vous ouvrez le fichier résultant maintenant, vous voyez que chacune des balises

   a été formatée automatiquement comme la balise originale

   

4. Ouvrir ExternalCSS. CSS.

5. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

   div> p {text-align: right;} INSEREZ L'IMAGE POUR 2. 2 ICI
   

6. Rechargez la page de test.

   Notez que la seule balise

   qui a été affectée est celle qui a le tag en tant que parent direct. En outre, notez que la mise en forme précédente cascades dans le formatage en cours. Vous n'avez pas remplacé le formatage existant, de sorte que le texte apparaît comme avant - il utilise simplement la justification à droite au lieu de la justification à gauche par défaut.

   

7. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

   div p {text-decoration: interligne; background-color: # ff7f7f;}
   

8. Rechargez la page de test.

   Notez que deux lignes sont affectées cette fois. De plus, le style de couleur d'arrière-plan a été modifié, de sorte que ces deux lignes utilisent la nouvelle couleur - elle a la priorité sur la couleur d'origine. Lorsque vous pensez à la partie en cascade de CSS, pensez à un flux dans lequel les changements en aval prennent le pas sur l'état d'origine de l'eau.

   

9. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

   div + p {font-famille: monospace; font-style: italic;}
   

10. Rechargez la page de test.

    Seule la ligne qui apparaît directement après le est affectée: La police a été remplacée par une police à espacement fixe (normalement réservée au code) et est en italique.

    

11. Tapez le code suivant après les styles existants et enregistrez les modifications sur le disque.

    div ~ p {font-weight: plus audacieux; taille de police: 30px; marge: 0px; color: # 7f007f;}
    

12. Rechargez la page de test.

    

Notez que les deux balises

qui apparaissent après l'étiquette sont affectées. La police apparaît maintenant en gras et est plus grande. La couleur de la police a également changé. Ce qui est particulièrement important dans cette partie de l'exemple, c'est que la définition de la marge à 0px supprime l'espace blanc entre les lignes.