CSS3 选择器

VincentHu_

已于 2024-04-03 15:58:26 修改

阅读量156

点赞数

分类专栏： HTML&CSS 文章标签： css3 css html

于 2021-12-20 07:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_44895385/article/details/121886796

版权

HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

标签选择器

通过标签名，找到页面中所有这类标签，设置样式

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

标签名 {
    css属性名: 属性值;
}

在这里插入图片描述

标签选择器“覆盖面”非常大，所以通常用于标签的初始化

ul {
/* 
    去掉无序列表的小圆点 
    list 列表
    style 样式
    none 没有
*/
list-style: none;
}
a {
/* 
    去掉超级链接的下划线 
    text 文本
    decoration 装饰
    none 没有
*/
text-decoration: none;
}

id选择器

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

#id属性值 {
    css属性名: 属性值;
}

在这里插入图片描述

class选择器

通过类名，找到页面中所有带有这个类名的标签，设置样式

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

.类名 {
    css属性名: 属性值;
}

在这里插入图片描述

原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类，HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

/*
    font 字体
    size 尺寸
    12px 12像素
*/
.fs12 {
    font-size: 12px;
}
.fs14 {
    font-size: 14px;
}
.fs16 {
    font-size: 16px;
}
.color-red {
    color: red;
}
.color-blue {
    color: blue;
}
.color-green {
    color: green;
}

<p class="fs18 color-green">我是一个文字</p>

类与id的区别

class类名与id属性值的区别

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与id选择器的区别

类选择器以 . 开头
id选择器以 # 开头

实际开发的情况

类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

通配符选择器

找到页面中所有的标签，设置样式

开发中使用极少，只会在极特殊情况下才会用到
可能会用于去除标签默认的margin和padding

* {
    css属性名: 属性值;
}

在这里插入图片描述

复合选择器

选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

选择器名称	举例	距离的意义
后代选择器	`.box .spec`	选择类名为box的标签内部的类名为spec的标签
交集选择器	`li.spec`	选择既是li标签，也属于spec类的标签
并集选择器	`ul, ol`	选择所有ul和ol标签

后代选择器

根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

后代包括：儿子、孙子、重孙子……
后代选择器中，选择器与选择器之前通过空格隔开
后代选择器可以有很多空格，隔开好几代

CSS选择器中，使用空格表示“后代”

选择器1 选择器2 {
    css
}

在这里插入图片描述

交集选择器

选中页面中同时满足多个选择器的标签
（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面

选择器1选择器2 {
    css
}

选择有 .spec 类的 h3 标签，此时应该使用交集选择器

h3.spec {
    font-style: italic;
}

并集选择器

同时选择多组标签，设置相同的样式
找到选择器1和选择器2选中的标签，设置样式

并集选择器中的每组选择器之间通过 , 分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

选择器1, 选择器2 {
    css
}

ul, ol {
    list-style: none;
}

伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态
例如a标签：

伪类	意义
`a:link`	没有被访问的超级链接
`a:visited`	已经被访问过的超级链接
`a:hover`	正被鼠标悬停的超级链接
`a:active`	正被激活的超级链接（按下按键但是还没有松开按键）

a标签的伪类书写，要按照顺序，否则会有伪类不生效

CSS3新增伪类

伪类	意义
`:empty`	选择空标签
`:focus`	选择当前获得焦点的表单元素
`:enabled`	选择当前有效的表单元素
`:disabled`	选择当前无效的表单元素
`:checked`	选择当前已经勾选的单选按钮或者复选框
`:root`	选择根元素，即 `<html>` 标签

属性选择器

举例	意义
`img[alt]`	选择有`alt`属性的`img`标签
`img[alt="故宫"]`	选择`alt`属性是故宫的`img`标签
`img[alt^="北京"]`	选择`alt`属性以北京开头的`img`标签
`img[alt$="夜景"]`	选择`alt`属性以夜景结尾的`img`标签
`img[alt*="美"]`	选择有`alt`属性中含有美字的`img`标签
`img[alt~="手机拍摄"]`	选择有`alt`属性中有空格隔开的手机拍摄字样的`img`标签
`img[alt	=“参赛作品”]`

元素关系选择器

名称	举例	意义
子选择器	`div>p`	div的子标签p
相邻兄弟选择器	`img+p`	图片后面紧跟着的段落将被选中
通用兄弟选择器	`p~span`	p元素之后的所有同层级span元素

子选择器

根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

子代只包括：儿子
子代选择器中，选择器与选择器之前通过 > 隔开

选择器1 > 选择器2 {
    css
}

在这里插入图片描述

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中，说白了，a+b就是选择“紧跟在a后面的一个b”，相邻兄弟选择器从IE7开始兼容
在这里插入图片描述

通用兄弟选择器

通用兄弟选择器（~），a~b 选择a元素之后所有同层级b元素，通用兄弟选择器从IE7开始兼容

在这里插入图片描述

序号选择器

举例	意义	兼容性
`:first-child`	第一个子元素	IE7
`:last-child`	最后一个子元素	IE9
`:nth-child(3)`	第3个子元素	IE9
`:nth-of-type(3)`	第3个某类型子元素	IE9
`:nth-last-child(3)`	倒数第3个子元素	IE9
`:nth-last-of-type(3)`	倒数第3个某类型子元素	IE9

:first-child

表示“选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p

.box1 p:first-child {
color: red;
}

<div class="box1">
    <p>1</p> <!--被选择-->
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

:last-child

表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p

.box1 p:last-child {
color: red;
}

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p> <!--被选择-->
</div>

:nth-child()

:nth-child()可以选择任意序号的子元素

.box2 p:nth-child(3) {
color: green;
}

<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p> <!--被选择-->
    <p>4</p>
</div>

:nth-child()可以写成an + b的形式，表示从b开始每a个选一个，注意不能写为b + an

.box2 p:nth-child(3n + 2) {
color: green;
}

<div class="box2">
    <p>1</p>
    <p>2</p> <!--被选择-->
    <p>3</p>
    <p>4</p>
    <p>5</p> <!--被选择-->
    <p>6</p>
    <p>7</p>
    <p>8</p> <!--被选择-->
</div>

2n+1等价于odd，表示奇数
2n等价于even，表示偶数

.box2 p:nth-child(2n + 1) {
    color: green;
}
.box2 p:nth-child(odd) {
    color: green;
}
.box2 p:nth-child(2n) {
    color: green;
}
.box2 p:nth-child(even) {
    color: green;
}

:nth-of-type()

:nth-of-type()将选择同种标签指定序号的子元素

.box4 p:nth-of-type(3) {
color: blue;
}

<div class="box4">
    <p>我是1号p</p>
    <p>我是2号p</p>
    <h3>我是1号h3</h3>
    <h3>我是2号h3</h3>
    <p>我是3号p</p>  <!--被选择-->
    <p>我是4号p</p>
    <h3>我是3号h3</h3>
    <h3>我是4号h3</h3>
</div>

:nth-last-child()

:nth-last-of-type()

:nth-last-child()和:nth-last-of-type()都是倒数选择

.box5 p:nth-last-child(2) {
color: red;
}

<div class="box5">
    <p>我是1号p</p>
    <p>我是2号p</p>
    <p>我是3号p</p> <!--被选择-->
    <p>我是4号p</p>
</div>

伪元素

CSS3新增了 “伪元素” 特性，顾名思义，表示虚拟动态创建的元素，伪元素用双冒号表示，IE8可以兼容单冒号。

::before和::after

::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容
::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容

a::before {
content: "★";
}

::selection

::selectionCSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter

::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line

::first-line会选中某元素中（必须是块级元素）第一行全部文字

VincentHu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 选择器

CSS3 选择器
复制链接

扫一扫

专栏目录

CSS3 选择器

标签选择器

id选择器

class选择器

原子类

类与id的区别

通配符选择器

复合选择器

后代选择器

交集选择器

并集选择器

伪类选择器

CSS3新增伪类

属性选择器

元素关系选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

序号选择器

:first-child

:last-child

:nth-child()

:nth-of-type()

:nth-last-child()

:nth-last-of-type()

伪元素

::before和::after

::selection

::first-letter

::first-line

“相关推荐”对你有帮助么？