css伪类选择器和伪元素选择器（css伪类选择器有哪几种？）

大家好，我是讯享网，很高兴认识大家。

语法 : 标签名{}

作用 : 选中对应标签中的内容

例:p{} , div{} , span{} , ol{} , ul{} ......

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 :

<style>

.A{ 属性：属性值；}

.B{属性：属性值；}

.C{属性：属性值；}

</style>

段落1

段落1

段落1

代码示例：

讯享网

运行结果：

讯享网

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 : 段落1

段落1

段落1

#A{} , #B{} , #C{} ......

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

例子 : *{

margin: 0; //外间距

padding: 0; //内间距

}

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

代码示例：

讯享网

运行结果：

复合选择器包括交集选择器、并集选择器、和后代选择器

1.交集选择器

“交集”选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个选择器必须是标签选择器，第二个选择器必须是 class 类选择器或 id选择器。这两个选择器之间不能有空格，必须连续书写。

格式：p.class{Color:red; font-size:16px;}

代码示例：

运行结果：

说明：页面中只有第2个段落使用了“交集”选择器，可以看到格式的最终结果为字体
大小为20px、蓝色字体、红色边框且无下划线，刚好是两个选择器所定义的样式的交集

2.并集选择器

在CSS中，可以使用逗号分隔的"并集"选择符来选择多个元素，即选择多个选择器所匹配的元素

可以使用多个不同类型的选择器进行并集选择。例如，如果想选择具有类名为"class1"的元素和所有标签元素，可以使用以下选择器：

代码：

讯享网

运行结果：

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素

后代选择符（descendant combinator）：使用空格来选择一个元素的后代元素（可跨代）

代码示例：

运行结果：

子代选择器（child combinator）：使用 ">" 符号来选择一个元素的直接子元素。（不可跨代）

代码示例：

讯享网

运行结果：

3.相邻兄弟选择器

相邻兄弟选择符（adjacent sibling combinator）：使用 "+" 符号来选择一个元素的紧邻兄弟元素

代码示例：

运行结果：

通用兄弟选择符（general sibling combinator）：使用 "~" 符号来选择一个元素之后的所有兄弟元素

代码示例：

讯享网

运行结果：

运用各类选择器实现下面网页：

代码：

:first-child 第一个子元素

:last-child 最后一个子元素

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

关于:nth-child()的特殊值(括号内的内容可以填写以下几种)

n 第n个 n的范围0到正无穷（全选）

even或2n 选中偶数位的元素

odd或2n+1 选中奇数位得到元素

以child结尾的是在所有元素中选择

:first-of-type 第一个子元素

:last-of-type 最后一个子元素

:nth-of-type() 选中第n个元素
以type结尾的是在相同元素中选择

:not() 将符号条件的元素去除

以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

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

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

css伪类选择器和伪元素选择器（css伪类选择器有哪几种？）

1.交集选择器

2.并集选择器

相关推荐