2.2CSS3选择器

最新推荐文章于 2022-12-08 14:03:12 发布

站住前面的疯子

最新推荐文章于 2022-12-08 14:03:12 发布

阅读量241

点赞数 1

文章标签： html5 css3

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/sid170401023/article/details/113029960

版权

一、传统CSS2.1选择器

1、标签选择器和id选择器

（1）标签选择器

①标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面所有该种标签

②标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

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

在这里插入图片描述

（2）id选择器

①认识id属性：标签可有有id属性，是这个标签的唯一标识

②id的名称只能那个由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母

③同一个页面上不能由相同的id标签

④CSS选择器可以使用#井号前缀，选择制定id的标签

在这里插入图片描述

2、class选择器

（1）class类名

①class属性表示“类名”

②类名的命名规范和id命名规范相同

③使用点.前缀选择指定class的标签

（2）class类名非常灵活

①多个标签可以为相同类名

②同一个标签可以同时属于多个类，类名用空格隔开

在这里插入图片描述

（3）原子类

①在做网页项目前，可以将所有的常用字好、文字颜色、行高、外边距、内边距等都设置为单独的类

②HTML标签就可以“则需选择”它的类名了，这样就可以非常快速的添加一些常见样式

在这里插入图片描述

3、复合选择器

在这里插入图片描述

后代选择器

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

②“后代”不一定是”儿子“

③后代选择器可以有很多空格，隔开好几代

4、伪类

（1）伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超姐链接拥有4个特殊状态

在这里插入图片描述

（2）爱恨准则 a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效 LOVE HATE

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

二、CSS3新增选择器

1、元素关系选择器

在这里插入图片描述

（1）子选择器

①当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

②后代选择器不一定限制是子元素

③子选择器从IE7开始兼容

（2）相邻兄弟选择器

①相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

②说白了，a+b就是选择“紧跟在a后面的一个b”

③相邻兄弟选择器从IE7开始兼容

（3）通用兄弟选择器

①通用兄弟选择器（_），ab选择a元素之后所有同层级b元素

②通用兄弟选择器从IE7开始兼容

在这里插入图片描述

在这里插入图片描述

2、序号选择器

在这里插入图片描述

（1）:first-child

在这里插入图片描述

（2）:last-child

在这里插入图片描述

（3）:nth-child()

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

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

③2n等价于even，表示偶数

在这里插入图片描述

在这里插入图片描述

（4）:nth-of-type()

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

在这里插入图片描述

（5）:nth-last-child（）

倒数选择

在这里插入图片描述

（6）:nth-last-of-type()

倒数选择

在这里插入图片描述

3、属性选择器

在这里插入图片描述

（1）img[alt]：选择有[alt]属性

在这里插入图片描述

（2）img[alt=“北京天安门”]：精准匹配

在这里插入图片描述

（3）img[alt^=“北京”]：前缀匹配、开头匹配

在这里插入图片描述

（4）img[alt$=“夜景”]：结尾匹配

在这里插入图片描述

（5）img[alt*=“体育”]：任意位置匹配

在这里插入图片描述

（6）img[alt~=“手机拍摄”]：以手机拍摄为空格分开的独立部分

在这里插入图片描述

（7）img[alt|=“参赛作品”]：以参赛作品-开头匹配

在这里插入图片描述

4、CSS新增伪类

在这里插入图片描述

（1）:empty

在这里插入图片描述

（2）:focus :checked :enabled :disabled root

在这里插入图片描述

在这里插入图片描述

5、伪元素

（1）CSS新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素

（2）伪元素用双冒号表示，IE8可以兼容单冒号

（3）::before和::after

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

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

在这里插入图片描述

（3）::selection

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

在这里插入图片描述

（4）::first-letter和::first-line

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

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

在这里插入图片描述

三、层叠性和选择器权重计算

（1）层叠性

①CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质

②层叠性：多个选择器可以同时作用于同一个标签，效果叠加

在这里插入图片描述

③层叠性的冲突处理

如果多个选择器定义的属性有冲突呢？CSS有严密的处理冲突的规则

在这里插入图片描述

（2）复杂选择器权重计算

复杂选择器可以通过(id的个数，class的个数，标签的个数)的形式，计算权重

在这里插入图片描述

（3）!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写！important

（4）!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符通配符 > 继承

在这里插入图片描述

四、课程总结

1、课程重点

（1）CSS选择器有哪些？请按CSS2.1和CSS3分别回答
CSS2.1：标签选择器、id选择器、类选择器、复合选择器（交集选择器、并集选择器、后代选择器）、伪类
CSS3：元素关系选择器（> + ~）、属性选择器、序号选择器、伪元素、新增伪类
（2）类名的使用很灵活，它有哪些用法？
①公共类：
id选择器死板，同一个页面id只允许出现一次
类名选择器使用比较灵活，类名同一个标签可以携带多个类名、同一个类名又可以有多个标签
②原子类：
把类名拆分非常细，每条CSS属性都设置成类名，按需选用
（3）什么是伪类？什么是伪元素
①伪类：一个元素用户赋予它的一个状态，比如超级链接(link visited hover actived)
②伪元素:（::）CSS3新增的特性，无中生有，创造出来的(::before、::after、 ::selection、 ::first-letter、 ::first-line)

2、选择器权重

!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符通配符 > 继承

复杂选择器:数id、数class、数标签计算权重

！important提升权重

站住前面的疯子

关注

1
点赞
踩
0

收藏

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

一、传统CSS2.1选择器1、标签选择器和id选择器（1）标签选择器 ①标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面所有该种标签 ②标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅 ③标签选择器“覆盖面”非常大，所以通常用于标签的初始化（2）id选择器 ①认识id属性：标签可有有id属性，是这个标签的唯一标识 ②id的名称只能那个由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。