interface Web
Questions et réponses frontales
Les sélecteurs en CSS incluent-ils des sélecteurs de balises hypertextes ?
Les sélecteurs en CSS incluent-ils des sélecteurs de balises hypertextes ?
Non inclus. Les sélecteurs CSS incluent : 1. Un sélecteur de balise, qui localise des éléments HTML spécifiques via le nom de l'élément de la page HTML ; 2. Un sélecteur de classe, qui localise des éléments HTML spécifiques via la valeur de l'attribut de classe de l'élément HTML ; qui localise des éléments HTML spécifiques via la valeur de l'attribut id de l'élément HTML ; 4. Le sélecteur de caractère générique "*" peut faire référence à tous les types d'éléments de balise, y compris les éléments personnalisés ; 5. Le sélecteur d'attribut utilise le nom d'attribut existant du ; Élément HTML ou valeur d'attribut pour localiser des éléments HTML spécifiques.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Les sélecteurs CSS n'incluent pas les "sélecteurs de balises hypertextes", mais incluent les sélecteurs de classe, les sélecteurs de balises, les sélecteurs d'ID, les sélecteurs d'attributs, les sélecteurs de pseudo-classe, etc.
css Qu'est-ce qu'un sélecteur ? Le style est la plus petite unité syntaxique du CSS Chaque style contient deux parties : le sélecteur et la déclaration (règle), comme le montre la figure ci-dessous.
1. Sélecteur (Selector) 
Le sélecteur se compose de l'identifiant de l'élément HTML, de l'attribut de classe ou du nom de l'élément lui-même et de quelques symboles spéciaux, utilisés pour spécifier pour quel élément HTML définir le style. , tel que le sélecteur p signifie définir des styles pour toutes les balises
de la page
2 DéclarationIl peut y avoir une ou plusieurs déclarations. Ces déclarations indiquent au navigateur comment afficher l'objet spécifié par le. sélecteur. Toutes les déclarations sont placées entre une paire d'accolades { }, immédiatement après le sélecteur. Une instruction doit comprendre deux parties : les attributs et les valeurs d'attribut, et utiliser un point-virgule pour marquer la fin d'une instruction. La dernière instruction d'un style peut omettre le point-virgule.
-
Attribut : Le nom de style que vous souhaitez définir pour l'élément HTML, composé d'une série de mots-clés, tels que couleur, bordure, police (police ), etc. CSS fournit de nombreux attributs, que vous pouvez consulter sur le site officiel du W3C
{ }内，然后整体紧邻选择器的后面。声明必须包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。
属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 W3C 官网查看；
值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。
css选择器有哪些？
我们从一个Html结构开始
<div id="box"> <div class="one"> <p class="one_1"> </p > <p class="one_1"> </p > </div> <div class="two"></div> <div class="two"></div> <div class="two"></div> </div>Copier après la connexion关于css常用的选择器有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
还有一些使用频率相对没那么多的选择器：
伪类选择器
:link ：选择未被访问的链接 :visited：选取已被访问的链接 :active：选择活动链接 :hover ：鼠标指针浮动在上面的元素 :focus ：选择具有焦点的 :first-child：父元素的首个子元素
Copier après la connexion伪元素选择器
:first-letter ：用于选取指定选择器的首字母 :first-line ：选取指定选择器的首行 :before : 选择器在被选元素的内容前面插入内容 :after : 选择器在被选元素的内容后面插入内容
Copier après la connexion属性选择器
[attribute] 选择带有attribute属性的元素 [attribute=value] 选择所有使用attribute=value的元素 [attribute~=value] 选择attribute属性包含value的元素 [attribute|=value]：选择attribute属性以value开头的元素
Copier après la connexion在CSS3中新增的选择器有如下：
层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器
:first-of-type 表示一组同级元素中其类型的第一个元素 :last-of-type 表示一组同级元素中其类型的最后一个元素 :only-of-type 表示没有同类型兄弟元素的元素 :only-child 表示没有任何兄弟的元素 :nth-child(n) 根据元素在一组同级中的位置匹配元素 :nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数 :last-child 表示一组兄弟元素中的最后一个元素 :root 设置HTML文档 :empty 指定空的元素 :enabled 选择可用元素 :disabled 选择被禁用元素 :checked 选择选中的元素 :not(selector) 选择与 <selector> 不匹配的所有元素
Copier après la connexion属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素 [attribute^=value]：选择attribute属性开头为value的所有元素 [attribute$=value]：选择attribute属性结尾为value的所有元素
Copier après la connexioncss基本选择器和优先级
css基本选择器
选择器名称 描述 类型选择器/元素选择器
又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 类选择器 是通过HTML元素的class属性的值定位具体HTML元素。这种基本选择器的用法是 Valeur : se compose d'une valeur numérique et d'une unité ou d'un mot-clé, utilisé pour contrôler l'effet d'affichage d'un certain élément ; Par exemple, la valeur de l'attribut color peut être rouge ou #F1F1F1, etc..类名Que sont les sélecteurs CSS ? Nous commençons par une structure HTML #nav-global > ul > li > a.nav-link
Copier après la connexionCopier après la connexionLes sélecteurs couramment utilisés pour les CSS sont : 🎜🎜🎜Sélecteur de type/ sélecteur d'élément🎜🎜🎜 également connu sous le nom de sélecteur de type, ce sélecteur de base permet de localiser à travers les éléments de la page HTML Nom des éléments HTML spécifiques. Si le sélecteur de type est utilisé seul, il localisera tous les éléments portant ce nom d'élément dans la page HTML actuelle. 🎜🎜🎜🎜Class Selector🎜🎜 localise des éléments HTML spécifiques grâce à la valeur de l'attribut de classe de l'élément HTML. L'utilisation de ce sélecteur de base se présente sous la forme desélecteur d'id (#box ), sélectionnez l'élément avec l'identifiant de la boîte
- 🎜Sélecteur de classe (.one), sélectionnez tous les éléments avec le nom de classe un🎜
- 🎜Sélecteur de balise (div), sélectionnez Tous les éléments avec le tag div 🎜
- 🎜Sélecteur descendant (#box div), sélectionnez tous les éléments div avec l'identifiant à l'intérieur de l'élément box 🎜
- 🎜Sélecteur enfant (.one> one_1), sélectionne tous les éléments .one_1 dont l'élément parent est .one🎜
- 🎜Sélecteur de frères et sœurs adjacents (.one+.two), sélectionne tous les éléments .two suivant immédiatement .one🎜< /li>
- 🎜Sélecteur de groupe (div, p), sélectionne tous les éléments de div et p🎜
- 🎜sélecteur de pseudo-classe🎜
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>这是一个demo</title> <style> #myid{color:red;} .myclass1{color:yellow;} h1,p {color:green;} </style> <body> <h1 id="这是一个标题-请查看优先级">这是一个标题，请查看优先级</h1> <p id="myid">这是一个段落，请查看优先级</p> </body> </head> </html>Copier après la connexionCopier après la connexion- 🎜 Sélecteur de pseudo-éléments 🎜
- 🎜Sélecteur d'attribut🎜
- 🎜Sélecteur hiérarchique (p~ul), sélectionne chaque élément ul précédé d'un élément p🎜
- 🎜Sélecteur de pseudo-classe🎜
- 🎜Sélecteur d'attribut🎜
Nom du sélecteur< /th> Description 🎜.classname. 🎜🎜🎜🎜Le sélecteur d'identifiant🎜🎜 est similaire au sélecteur de classe dans le sens où il correspond aux éléments HTML en fonction d'un certain attribut. Le sélecteur de classe correspond au sélecteur de classe, tandis que le sélecteur d'ID correspond à l'attribut id. Il convient de noter que l'attribut ID est le seul non répétable dans toute la page. 🎜🎜🎜🎜🎜Sélecteur universel/sélecteur Wildcard🎜是一个星号（ *），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
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)3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O. Meilleurs paramètres graphiques3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌Assassin's Creed Shadows: Solution d'énigmes de coquille2 Il y a quelques semaines By DDDR.E.P.O. Comment réparer l'audio si vous n'entendez personne4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌WWE 2K25: Comment déverrouiller tout dans Myrise1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
See all articles
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
