语法 : 标签名{}
作用 : 选中对应标签中的内容
例:p{} , div{} , span{} , ol{} , ul{} ......
语法 : .class属性值{}
作用 : 选中对应class属性值的元素
例子 :
<style>
.A{ 属性：属性值；}
.B{属性：属性值；}
.C{属性：属性值；}
</style>
<p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
代码示例：
运行结果：
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
语法 : #id属性值{}
作用 : 选中对应id属性值的元素
例子 : <p id="A">段落1</p>
<p id="B">段落1</p>
<p id="C">段落1</p>
#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伪类选择器有哪几种？）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/15826.html