CSS中的各类选择器

元素选择器

作用：根据标签名来选中指定的元素。

语法：标签名{}

id选择器

作用：根据元素的id属性值选中一个元素，不能重复。

语法： #id属性值{}

类选择器

作用：class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组。可以同时为一个元素指定多个class属性，多个class之间用空格隔开。

语法： .class属性值

通配选择器

作用：选中页面中的所有元素。

语法：*

复合选择器

作用：选中同时复合多个条件的元素。

语法：选择器1选择器2选择器3选择器n{}

注意：交集选择器中如果又元素选择器，必须使用元素选择器开头。

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素。

语法：选择器1，选择器2，选择器3，选择器n{}

关系选择器

定义：

父元素：直接包含子元素的元素叫做父元素。

子元素：直接被父元素包含的元素是子元素。

祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。

后代元素：直接或简介被祖先元素包含的元素，子元素也是后代元素。

兄弟元素：拥有相同父元素的元素。

伪类选择器

伪类是不存在的类、特殊的类。伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素...

       伪类一般情况下都是使用：开头

       :first-child  第一个子元素

       :last-child 最后一个子元素

       :nth-child()  选中第n个子元素

             特殊值：n  第n

                n的范围0到正无穷

                2n 表示选中偶数位的元素

                2n+1 或 odd   表示选中奇数位的元素

                以上这些伪类都是根据所有的子元素进行排序

                :first-of-type  

                :last-of-type

                :nth-of-type()    功能和上述的类似，不同点是他们是在同类型元素中进行排序

                :not() 否定伪类:将符合条件的元素从选择器中去除。

    超链接的伪类：

    :link 表示没访问过的连接（正常的链接）

    :visited 用来表示访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色

    :hover 表示鼠标移入的状态

    :active  表示鼠标点击




    伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置），使用 :: 开头

    ::first-letter  表示第一个字母

    ::first-line  表示第一行

    ::selection  表示选中的内容

    ::before 元素的开始

    ::after  元素的最后

    before和after必须结合content属性来使用

总结

以上就是本期的学习内容啦~

【CSS】css中的各类选择器

CSS中的各类选择器

元素选择器

id选择器

类选择器

通配选择器

复合选择器

选择器分组（并集选择器）

关系选择器

相关选择器

子元素选择器：选中指定父元素的指定子元素。

后代元素选择器：选中指定元素内的指定后代元素

兄弟元素选择器：选择下一个兄弟

属性选择器

伪类选择器

总结