【九月打卡】第7天 前端工程师2022版 css选择器第一讲

课程名称：前端工程师2022版

课程章节：css选择器

课程讲师： elex

课程内容：

一、选择器

CSS2.1选择器

标签选择器

类选择器（可相同，用于分组；命名有便于理解最佳;"."表示；多个类用逗号隔开）

id选择器（独一无二;"#"表示）

复合选择器和全局选择器（div.spec）

群组（并集）选择器

后代选择器

伪类（：link未访问；：visited已访问；：hover鼠标悬浮；：active 激活（鼠标点击未松开），样式书写顺序按此顺序）

CSS3新增

关系选择器

>后的子选择器  +紧跟的同级选择器  ~后的同级选择器

序号选择器（序号、类型）

第一、末尾、倒数第*个、第*个

序号：first/last-child、nth-last-child、nth-child()

类型：first/last-of-type、nth-last-of-type、nth-of-type()

新增伪类

:empty、:focus获得焦点、enabled有效表单、disabled无效表单、以勾选的单元、复选框、:root根元素

伪元素（3类--应用对象只可为块级元素）

前后：::before、::after  （必选属性：content:"...."）

用户高亮：::selection

第一个字母/行：::first-letter、::first-line

属性选择器（标签+[]）了解

二、样式优先级及权重计算

总体原则：同权重，就近（后端）原则；不同权重，权重高的，优先应用。

单一样式优先级：！important>行内样式>内部样式（id>类>标签选择器>全局选择器

）

权重表示：（id个数，类名个数，标签个数）

辅助理解权值大小：id=100；类=10；标签=1；全局=0

三、补充说明伪类

    定义：

        添加到选择器的描诉性词语，指定要选择的元素的特俗状态

        在CSS中"："一般就表示伪类

        例：

            超链接的四种状态

            a:link,visited,hover,actice

                link：超链接，没被点击的

                visited：已经访问过的

                hover：鼠标悬停时

                active：鼠标点击着且还没有松开的超链接

            按照"爱恨准则"书写顺序，不然会使有的伪类设置不生效

                LOVE HATE=link,visited,hover,active

                hover必须在link、visited之后

                actice必须在hover之后

                link和visited两个之间的顺序无所谓

                link、visited > hover > active

        给元素增加边框：

            可以使用border属性：

                border：边框大小 边框类型 边框颜色;

                    三个属性都有写的时候，无论这些的顺序，都能实现

课程收获：

谢谢老师，讲的非常细致，很容易懂。