CSS样式选择器是指用来选择CSS样式的HTML元素的特殊元素。CSS样式选择器通常使用CSS选择器字符串来指定，例如 p 选择所有的段落元素，div 选择所有的 div 元素等等。

CSS选择器字符串由两部分组成：

选择器：用来指定要选择的元素。例如，p 选择所有的段落元素，div 选择所有的 div 元素等等。

属性：用来指定要应用于该元素的CSS属性。例如，color: red; 指定文本颜色为红色。

常用的元素选择器有哪些？

1.通配符选择器：* { }，选中页面中的所有的元素（会影响浏览器的性能）:

2.标签名选择器：元素名 { }，选中页面中所有的指定标签

3.id选择器：#id { }，选中具有指定id的元素(不建议用id写样式)

4.类名选择器：.class { }，.加class类名的选择器

5.分组选择器：选择器1，选择器2，....,选择器n { }，几个选择器选中的元素 共用一套样式

6.交集选择器：选择器1选择器2{ }，两者之中相同的

常用的关系选择器有哪些？

1.子代选择器：父元素>子元素{ }

2.后代选择器（空格隔开）：祖先元素 后代元素{ }

3.相邻选择器：+ 选中某个元素之后的 相邻下一个元素

4.兄弟选择器：~ 选中某个元素之后的 其他的兄弟元素

常用的属性选择器有哪些？

[name] 具有name属性的元素 

[att="val"] 具有att属性且属性值完全等于val的元素(一个字符都不能少，包括空格) 

[att~="val"] 具有att属性, 且多个用空格隔开的属性值里面, 其中一个等于val的元素

[att^="val"] 具有att属性, 且属性值的整个字符串, 以val开头

[att$="val"] 具有att属性, 且属性值的整个字符串, 以val结尾 

[att*="val"]  具有att属性, 且属性值的整个字符串, 含有val字符 

[att|="val"] 具有att属性, 且属性值的整个字符串, 以val开头用-连接其他字符,  或者属性值只有val 

常用的伪类选择器有哪些？

1.:root 只选中HTML元素 

2.:focus 元素获取焦点时的样式 

3.:not(css选择器) 选择不含有某个选择器的元素

4.:first-child 选中第一个子元素

5.:first-of-type 选中第一个指定元素

6.:last-child 选中最后一个子元素

7.:last-of-type 选中最后一个指定的元素

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

9.:nth-of-type(n) 选中第n个指定的元素（nth-child() 和 :nth-of-type() 可以选择奇数和偶数；odd 选中奇数个元素；even 选中偶数个元素；2n 选中偶数个元素；2n-1 选中奇数个元素）

10.:only-child 选中唯一一个的子元素 

11.:only-of-type 选中唯一的指定元素 

12.:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素

13.:checked 选中页面中被选中的单选框或复选框

14.:enabled 选中页面中, 处于可用(没有被禁用)的元素

15.:disabled 选中页面中 处于禁用状态的元素

16.:target 选中被激活的锚点

常用的伪元素选择器有哪些？

概念：在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。

1.:first-letter 给第一个字符添加特殊样式

2.:first-line 给第一行添加样式

3.:before 在内容的前面 插入伪元素(理解成span元素)

4.:after 在内容之后, 插入伪元素(理解成span元素)

其中:before和:after一定要与content：一起使用content：内容, content 可以未空, 但必须要有用来存放 只有装饰作用, 没有交互作用的小图标。

常用子元素选择器实例

:nth-child(odd)  //奇数
:nth-child(even) //偶数
:first-child  //第一个
:last-child  //最后一个
:nth-last-child(3)  //最后3个
:nth-child(n)  //第n个
:nth-child(2n)  //2的倍数,等同于偶数，如:2、4、6...
:nth-child(2n-1)  //2的倍数 - 1,等同于奇数,如:1、3、5...
:nth-child(3n+1)// a表示周期的长度,n是计数器(从 0 开始),b是偏移值,如:1、4、7...
:nth-child(n+3)  //大于等于3
:nth-child(-n+3)  //小于等于3
:nth-child(n + 2):nth-child(-n + 5)  //大于等于2且小于等于5,如:2、3、4、5
:not(:nth-child(n))  //不等于n
:not(:first-child):not(:last-child)  //不等于1和最后一个

以上就是糯麦为大家总结的CSS中的相关元素选择器相关知识，对于前端来说需理解并且熟练使用相关选择器的操作和用途，至于在实际项目中，同样的效果可以使用多种方法进行实现，如何选择最优的方式进行开发，则需要在不断的经验中进行总结和提炼，预祝每个前端同学都能做出自己想要的效果。