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结构开始
关于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:父元素的首个子元素
伪元素选择器
:first-letter :用于选取指定选择器的首字母 :first-line :选取指定选择器的首行 :before : 选择器在被选元素的内容前面插入内容 :after : 选择器在被选元素的内容后面插入内容
属性选择器
[attribute] 选择带有attribute属性的元素 [attribute=value] 选择所有使用attribute=value的元素 [attribute~=value] 选择attribute属性包含value的元素 [attribute|=value]:选择attribute属性以value开头的元素
在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) 选择与不匹配的所有元素
属性选择器
[attribute*=value]:选择attribute属性值包含value的所有元素 [attribute^=value]:选择attribute属性开头为value的所有元素 [attribute$=value]:选择attribute属性结尾为value的所有元素
css基本选择器和优先级
css基本选择器
#nav-global > ul > li > a.nav-link
.classname
选择器名称 | 描述 |
---|---|
类型选择器/元素选择器 |
又称为 类型选择器,这种基本选择器是通过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 |
|
|
Nom du sélecteur< /th> | Description |
是一个星号(* ),这个选择器是一个特殊的标签选择器,它可以指代所有类型的标签元素,包括自定义元素,以及
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
|