CSS选择器

Natsukiiiii

已于 2022-08-07 14:17:29 修改

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： css 前端 html

于 2022-08-07 14:13:04 首次发布

本文链接：https://blog.csdn.net/fakerking/article/details/126209904

HTML/CSS 专栏收录该内容

6 篇文章

订阅专栏

一.基本选择器

a、标签名选择器：通过标签名选择元素

标签名{

           样式属性：值;
           }

b、id选择器：通过标签的id属性值选择元素(标签有id属性,id属性的值不能重复)

#id属性的值{

           样式属性：值;

           }

c、class选择器(类选择器)：通过标签的class属性值选择元素(标签有class属性,class属性的值可以重复)

.class属性值{

           样式属性：值;

           }

二.属性选择器

1、E[att]：选择具有att属性的元素

   2、E[att="val"]：选择具有att属性,并且att属性值等于val的元素

   3、E[att~="val"]：选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val

   4、E[att^="val"]：选择具有att属性,并且att属性值是以val开头的字符串

   5、E[att$="val"]：选择具有att属性,并且att属性值是以val结尾的字符串

   6、E[att*="val"]：选择具有att属性,并且att属性值中包含val的字符串

   7、E[att|="val"]：选择具有att属性,并且att属性值是以val开头、以'-'分隔的字符串

三.关系选择器

1、包含选择器(E F)：选择所有被E包含的F元素

2、子元素选择器(E>F)：选择所有作为E元素的子元素F

3、相邻元素选择器(E+F)：选择紧贴在E元素之后F元素

4、兄弟选择器(E~F)：选择E元素后面的所有兄弟元素F

四.结构化的伪类选择器(伪类选择器带冒号)

1、html:root：根元素选择器。html文档中的根只有一个<html>。样式应用于页面的每个元素

html:root{

       样式属性：值;

       }

2、E:not(选择器)：不包含给定选择器的元素

3、E:only-child ：匹配父元素仅有一个子元素E

4、E:first-child ：匹配父元素的第一个子元素E

5、E:last-child : 匹配父元素的最后一个子元素E

6、E:nth-child(n)：匹配父元素中第(n)个子元素E

7、E:nth-last-child(n)：匹配父元素中倒数第(n)个子元素E

8、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E

9、E:empty ：匹配没有任何子元素的元素E

10、E:checked : 匹配用户界面上处于选中状态的元素E

11、E:enabled ：匹配用户界面上处于可用状态的元素E。

12、E:disabled ：匹配用户界面上处于禁用状态的元素E。