Maison interface Web tutoriel CSS Introduction à l'utilisation des pseudo-classes et pseudo-éléments

Introduction à l'utilisation des pseudo-classes et pseudo-éléments

Oct 30, 2020 pm 04:54 PM
伪元素 伪类

Introduction à l'utilisation des pseudo-classes et pseudo-éléments

pseudo-classes et pseudo-éléments css

line-height (définition officielle de la hauteur de ligne : deux lignes de base de texte alignées)

( recommandation de didacticiel vidéo : tutoriel vidéo CSS)

Pseudo-classe cible

:link    (a:link 未访问的链接  浏览器有缓存!!所以刷新没用)
	a:active{color:   ;}
:active (长按住)
:visited (已经访问的链接)
:hover (鼠标放上去)
:focus (获取用户焦点)
Copier après la connexion

Pseudo-élément (c'est un élément en ligne qui ne peut pas définir la largeur et la hauteur)

::after  (在元素后面添加内容)
::before  (在元素前面添加内容)
display:...
	inline-block(能够设置高度,和行内元素并排显示)
	inline
	block(独占一行)
	none(隐藏
Copier après la connexion

Propriétés CSS

	继承(一个元素如果没有设置某个属性的值,那么就会跟随父属性的值。如果设置了,就用自己的值)
		color ,font-size  line-height text-align
	层叠(后面的样式会覆盖前面的样式)
		当选择器相同时 后面的选择器会覆盖前面的
		当选择器不同时,根据选择器的权重设置
Copier après la connexion

Liste

	ul(无序列表)
	ol   (有序列表)
Copier après la connexion

Table

table
		tr单元行
		td单元格
		boder 边框
		cellpadding   单元格内部的间距
		cellspacing 单元格之间的距离
		width 表格的宽度
		align 表格的水平对齐方式
Copier après la connexion

Division des types d'éléments CSS (selon que l'élément peut être affiché dans un line)

	块级元素 (独占父元素的一行) 常用的块级元素 
		●	div
		●	p
		●	h1-h6
		●	ul--li
		●	table
		●	from
Copier après la connexion

Éléments de niveau en ligne (peuvent être affichés sur la même ligne que d'autres éléments en ligne)

		●	img
		●	span
		●	a
	●	inupt
Copier après la connexion

Recommandations associées : Tutoriel CSS

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Pourquoi les pseudo-éléments échouent-ils ? Pourquoi les pseudo-éléments échouent-ils ? Nov 21, 2023 pm 05:13 PM

Raisons de l'échec des pseudo-éléments : 1. Problèmes de sélecteur ; 2. Conflits de style ; 3. Problèmes d'héritage ; 4. Problèmes de compatibilité du navigateur ; Introduction détaillée : 1. Problème de sélecteur, le sélecteur du pseudo-élément peut être incorrect, ce qui empêche la sélection de l'élément cible ; 2. Conflit de style, s'il y a un conflit de style dans CSS, le pseudo-élément peut devenir invalide ; 3. Problème d'héritage, les pseudo-éléments peuvent ne pas hériter de certains attributs de style ; 4. Erreurs de syntaxe dans CSS, les pseudo-éléments peuvent échouer ; 5. Problèmes de compatibilité du navigateur, etc.

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3 Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3 Nov 20, 2023 am 11:20 AM

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3. L'exemple de code spécifique est le suivant : Code HTML : <divid="container" ><divclass="item"&gt ;Premier élément enfant</div><divclass="item"&

Implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder Implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder Nov 20, 2023 pm 03:17 PM

Pour implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder, des exemples de code spécifiques sont nécessaires dans le développement Web, CSS est un langage de feuille de style couramment utilisé pour contrôler la mise en page et le style des pages Web. Le sélecteur de pseudo-élément ::placeholder est un nouveau sélecteur en CSS3, qui est utilisé pour modifier le style d'espace réservé des zones de saisie (y compris les zones de saisie de texte, les zones de saisie de mot de passe, etc.). Ci-dessous, nous présenterons divers scénarios d'application et fournirons des exemples de code correspondants. Modifiez la couleur de l'espace réservé de la zone de saisie :

Pourquoi le survol est un pseudo-élément Pourquoi le survol est un pseudo-élément Oct 09, 2023 pm 05:45 PM

Hover n'est pas un pseudo-élément, c'est une pseudo-classe. Les pseudo-classes sont utilisées pour sélectionner un état ou un comportement spécifique d'un élément, tandis que les pseudo-éléments sont utilisés pour ajouter des styles à des parties spécifiques d'un élément. Parce que :hover est utilisé pour sélectionner un état spécifique d'un élément plutôt que d'ajouter des styles à une partie spécifique de l'élément, vous pouvez utiliser la pseudo-classe :hover pour styliser l'état de survol d'un élément, et vous pouvez utiliser le :hover pseudo-classe pour ajouter des effets de survol aux liens. La couleur du lien, la couleur d'arrière-plan, etc. peuvent changer lorsque la souris le survole.

analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css Aug 03, 2022 am 11:26 AM

Dans l'article précédent "Apprentissage des pseudo-sélecteurs CSS : analyse des sélecteurs de pseudo-éléments", nous avons découvert les sélecteurs de pseudo-éléments, et aujourd'hui, nous examinons de plus près les sélecteurs de pseudo-classes, j'espère que cela sera utile à tout le monde !

Utilisez le sélecteur de pseudo-classe :active pour implémenter les styles CSS pour les effets de clic de souris Utilisez le sélecteur de pseudo-classe :active pour implémenter les styles CSS pour les effets de clic de souris Nov 20, 2023 am 09:26 AM

Styles CSS utilisant le sélecteur de pseudo-classe :active pour obtenir des effets de clic de souris CSS est un langage de feuille de style en cascade utilisé pour décrire les performances et le style des pages Web. :active est un sélecteur de pseudo-classe en CSS, utilisé pour sélectionner l'état d'un élément lorsque l'on clique sur la souris. En utilisant le sélecteur de pseudo-classe :active, nous pouvons ajouter des styles spécifiques à l'élément cliqué pour obtenir l'effet de clic de souris. Ce qui suit est un exemple de code simple qui montre comment utiliser le sélecteur de pseudo-classe :active pour obtenir un effet de clic de souris.

A quoi sert d'ajouter des pseudo éléments ? A quoi sert d'ajouter des pseudo éléments ? Oct 09, 2023 pm 05:45 PM

Les pseudo-éléments peuvent être utilisés pour créer des effets décoratifs, obtenir des effets de mise en page spécifiques, créer des effets interactifs, modifier des états d'éléments spécifiques et créer des effets spéciaux. Introduction détaillée : 1. Créez des effets décoratifs. En définissant les attributs de contenu et les styles du pseudo-élément :before ou :after, vous pouvez insérer des icônes, des formes ou d'autres éléments décoratifs avant ou après l'élément, afin de pouvoir ajouter plus d'éléments. à la page Web. Attrait visuel et personnalisation ; 2. Obtenez des effets de mise en page spécifiques, qui peuvent être créés via des pseudo-éléments : before et :after, etc.

Explorez les concepts de base et les scénarios d'utilisation des pseudo-classes et pseudo-éléments CSS Explorez les concepts de base et les scénarios d'utilisation des pseudo-classes et pseudo-éléments CSS Dec 23, 2023 pm 01:21 PM

Comprendre les concepts de base et les scénarios d'application des pseudo-classes et pseudo-éléments CSS. CSS (CascadingStyleSheets) est un langage de balisage utilisé pour décrire le style des pages Web. Il peut contrôler l'apparence et la disposition des éléments dans les pages Web. En CSS, les pseudo-classes et les pseudo-éléments sont des fonctions très utiles qui peuvent étendre davantage la portée d'application et la flexibilité du CSS. 1. Pseudo-classes Les pseudo-classes sont des mots-clés utilisés pour sélectionner des éléments d'état spécifiques. Les pseudo-classes courantes incluent : survol, actif, focus, etc. Voici quelques exemples courants

See all articles