CSS选择器分类（有例子非常全）

您所在的位置：网站首页 › css选择符有哪几种形式,使用方法分别是什么 › CSS选择器分类（有例子非常全）

CSS选择器分类（有例子非常全）

2024-07-13 02:56| 来源: 网络整理| 查看: 265

1.基础选择器

单个选择器组成

1）标签选择器

指用HTML标签名称作为选择器，为页面中某一类标签指定统一的CSS样式。

p { color: green; } div { color: pink; }

缺点：不能设计差异化样式

2）类选择器（开发最常用）

差异化选择不同的标签，单独选择一个或者某几个标签

口诀：样式点定义，结构类调用

注意

不能用标签当类名可以使用中横线不要使用纯数字，中文定义类名命名要有意义 .red { color: red; } .green { color: green; } .blue { color: blue; } .yellow { color: yellow; } 格兰芬多斯莱特林拉文克劳赫奇帕奇

多类名：给一个标签指定多个类名，从而达到更多的选择目的

使用方式：用空格隔开

.red { color: red; } .font35 { font-size: 35px; } 格兰芬多

使用场景：可以抽取公用的样式，标签同时调用公有和私有样式

3）id选择器

口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 #pink { color: pink; } 迈克尔杰克逊类选择器id选择器人的名字，同一个名字可以被多人使用身份证号，唯一的，不能重复可使用多次只能使用一次在修改样式中使用最多一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4）属性选择器

根据标签的属性进行筛选的选择器

Yooo* yooo Mjjj* mjjj alison andy ruby body { background-color: black; color: white; } /* 有title、id属性 */ h1[title][id] { color: orange; } /* 有title属性 */ h1[title] { font-size: 50px; } /* title属性值是yooo */ h1[title="yooo"] { font-style: italic; } /* title属性值以yooo开头 */ h1[title^="yooo"] { font-weight: 400; } /* title属性值以com结尾 */ h1[title$="com"] { color: olivedrab; } /* title属性值包含yooo */ h1[title*="yooo"] { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } /* title属性值包含独立的词yooo */ h1[title~="yooo"] { text-decoration: line-through; } /* title属性值以yooo开始或者yooo紧接着-连接 */ h1[title|="yooo"] { text-align: center; }

在这里插入图片描述 5）通配符选择器

使用*定义，表示选取页面中所有元素

不需要调用，特殊情况才使用

* { color: red; } 我的我的我的 2.复合选择器

建立在基础选择器之上，对基本选择器进行组合形成的，更准确更高效。

1）后代选择器（重要）

包含选择器，可选择父元素里的子元素。

父子元素一定使用空格隔开，修改的是子元素的样式。

ol li { color: pink; } ol li a { color: red; } .nav li a { color: yellow; } 我是ol的孩子我是ol的孩子我是ol的孩子我是li的孩子我是ul的孩子我是ul的孩子我是ul的孩子我是ul的孩子我是ul的孩子我是ul的孩子我是li的孩子

2）子选择器（重要）

只能选择某元素的最近一级子元素，选亲儿子。

.nav>a { color: red; } 我是儿子我是孙子使用>隔开只选亲儿子，孙子重孙子都不管

3）并集选择器（重要）

可以选择多组标签，同时为他们定义相同的样式

div, p, .pig li { color: pink; } 熊大熊二光头强小猪佩奇猪爸爸猪妈妈用逗号隔开任何形式的选择器都可以成为并集选择器的一部分

4）兄弟选择器

Yooo* alison andy ruby ~选择同级标签，如下选择article的后代h1的所有h2兄弟 body { background-color: black; color: white; } article h1~h2 { color: orange; }

在这里插入图片描述

+选择同级标签，如下选择article的后代h1紧贴的h2兄弟 body { background-color: black; color: white; } article h1+h2 { color: orange; }

在这里插入图片描述 5）伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则，如链接伪类、结构伪类等。使用冒号:隔开

no1.链接伪类选择器

写法功能a:link选择所有未被访问的链接a:visited选择所有已被访问的链接a:hover选择鼠标经过的链接a:active选择鼠标正在按下还未弹起的链接顺序不能颠倒 LVHA因为a链接在浏览器中具有默认样式，所以需要给a单独指定样式 a { color: #333; text-decoration: none; } a:hover { color: #369; text-decoration: underline; } 小猪佩奇光头强

不只是链接可以使用伪类，其他元素也可以使用。

no2.:focus焦点伪类

用于选取获得焦点（光标）的表单元素，一般input表单元素才能获取

input:focus { background-color: pink; color: red; }

no3.:target目标伪类

用于控制锚点目标元素的样式。在点击后效果出现。

div { height: 900px; border: solid 1px #ddd; } div:target { color: orange; } Yooo* yooo.com

在这里插入图片描述点击链接后，跳转到锚点目标，同时更改样式。

no4.:root根伪类

相当于html标签选择器，选择页面内所有元素。

:root { color: orange; } Yooo* yooo.com alison ruby andy

在这里插入图片描述

no5.:empty空元素伪类

当标签没有内容为空时被选中。注意内容为空格时不起作用，因为有内容。

li { margin-bottom: 20px; border: solid 2px #ddd; } li:empty { display: none; } alison ruby andy

在这里插入图片描述

no6.结构伪类选择器

首尾元素伪类选择（first/last同理） Yooo* alison andy andy* ruby /* 表示选中article所有后代的第一个子元素 */ article :first-child { color: orange; }

在这里插入图片描述

/* 表示选中article所有儿子元素中的第一个 */ article>:first-child { color: olivedrab; }

在这里插入图片描述

/* 表示选中article后代的第一个子元素并且该子元素为h2 */ article h2:first-child { color: palevioletred; }

在这里插入图片描述

/* 表示选中article后代的类型为h2的第一个子元素 */ article h2:first-of-type { color: purple; }

在这里插入图片描述

唯一伪类选择 Yooo* alison andy ruby /* 表示选择article有唯一子元素的后代 */ article :only-child { color: orange; }

在这里插入图片描述

/* 表示选择article儿子类型为h2且唯一的元素 */ article>h2:only-of-type { color: palevioletred; }

在这里插入图片描述

根据元素正数编号 yooo alison ruby andy Yooo* alison andy ruby mjjj /* 表示选中article后代的第一个子元素 */ article :nth-child(1) { color: orange; }

在这里插入图片描述

/* 表示选中article后代的第一个子元素且该元素类型为h2 */ article h2:nth-child(1) { color: palevioletred; }

在这里插入图片描述

/* 表示选中article后代的所有子元素 */ article :nth-child(n) { color: seagreen; }

在这里插入图片描述

/* 表示选中ul中的偶数li，奇数用odd */ main ul li:nth-child(even) { color: orange; }

在这里插入图片描述

/* 表示选中article第二个类型为h1的后代 */ article h1:nth-of-type(2) { color: skyblue; }

在这里插入图片描述

根据元素倒数编号 yooo alison ruby andy Yooo* alison andy ruby mjjj /* 表示选中后两个li */ main>ul li:nth-last-child(-n+2) { color: orange; }

在这里插入图片描述

/* 表示选中从倒数第二个开始到正数第一个结束的li */ main>ul li:nth-last-child(n+2) { color: palevioletred; }

在这里插入图片描述

/* 表示选中article中倒数第二个h2 */ article h2:nth-last-of-type(2) { color: greenyellow; }

在这里插入图片描述

no7.:not()排除选择器

yooo alison ruby andy Yooo* alison andy ruby mjjj /* 表示选中前三个li，不包括第二个，不包括第一个 */ main>ul li:nth-child(-n+3):not(:nth-child(2)):not(:first-child) { color: orange; }

在这里插入图片描述

no8.表单伪类选择器

男女保存 /* 表示选中禁用input */ input:disabled { background: peachpuff; } /* 表示选中非禁用input */ input:enabled { background: paleturquoise; } /* 表示选中被选中元素所对应的的label */ input:checked+label { color: peachpuff; } /* 表示选中必填项input */ input:required { border: solid 2px #1C8FFF; } /* 表示选中验证有效的input */ input:valid { background: olivedrab; }

在这里插入图片描述

no9.文本伪类选择器

Yooo 霍格沃茨成立于10世纪左右，被认为是魔法世界中最好的魔法机构之一，尽管还有其他著名的魔法学校，包括布斯巴顿魔法学校和德姆斯特朗魔法学校。霍格沃茨学院共分为四个学院，分别是格兰芬多（Gryffindor）、赫奇帕奇（Hufflepuff）、拉文克劳（Ravenclaw）和斯莱特林（Slytherin），四个学院皆有其代表颜色与动物。在每学年的开学宴会之前，一年级新生都会轮流上台戴上分院帽进行分院，分院帽会根据你的性格和品质来判断你该属于哪一个学院。具有魔法能力的孩子在出生时就被录取，并在十一岁时通过猫头鹰收到由霍格沃兹寄来的录取通知书。然而，如果这个孩子是麻瓜出身或像哈利波特这样对魔法世界一无所知的混血儿，学校的工作人员会拜访孩子和家人，告诉他们魔法世界的遗产和存在。学校的确切位置永远无法被发现，因为它被渲染为不可标绘。在麻瓜们看来，这所学校就像是一座废弃的古老城堡。同样，大多数魔法学校的地点都被保护起来，以防止他们的教学方式被泄露，同时也保护学生和学校本身不受任何伤害。 /* 每段的首字母 */ p::first-letter { font-size: 20px; font-weight: 700; } /* 每段的首行 */ p::first-line { color: yellowgreen; } /* 在span标签后面添加内容和样式，如果是前面使用before */ span::after { content: ".com"; color: orange; }

在这里插入图片描述

【本文地址】

CSS选择器分类（有例子非常全）

CSS选择器分类（有例子非常全）

今日新闻

推荐新闻