CSS选择器主要的功能就是选中想要添加样式的元素，选择器就是用来匹配元素的，必须是要选中（书写正确）才可以给HTML页面中各种元素添加样式。

1、基本选择器

选择器最终选中的是离大括号最近的元素

通配选择器
格式：*{声明块}
所有的标签都应用其样式，已经很老旧快被淘汰，建议不用

元素选择器
格式：标记名{声明块}
所有与该标记名匹配的元素，都将应用声明块中的规则

类选择器
格式： . 类名{声明块}
所有class属性为指定类名的元素，都将应用声明块中的规则

注：命名规范

1、点号开始
2、包含字母、数字、下划线、连字符
3、点后面必须是字母 4、必须区分大小写

大驼峰命名法：每个单词的首字母大写
小驼峰命名法（推荐）：除了第一个单词，其他单词的首字母大写

类选择器又分：类选择器、伪类选择器和属性选择器

ID选择器（js用）

格式：#ID名{声明块}

特点：名字唯一，只能出现一次

组合选择器/并集选择器

格式：元素名，ID名，类名{声明块}

顺序没有先后

2、层次选择器

子级选择器

格式：父元素A>子元素B{声明块}

后代选择器

格式：祖先元素A+空格+后代元素B{声明块}

兄弟选择器

格式：兄弟元素A+“+”+兄弟元素B{声明块}

只能选中A元素后面的元素，AB间不能有其他元素

通用选择器

格式：兄弟元素A+“~”+兄弟元素B{声明块}

选中A元素后面的所有兄弟元素

4、伪类选择器

结构伪类选择器

元素A:nth-child(n){声明块}

n是数值（从0开始递增）或公式

1、A也可以是类选择器，条件要满足第n个是A元素！！！

注：所有兄弟元素必须是相同标签

2、选中第1个元素，元素A:first-child{声明块}

3、选中最后一个元素，元素A:last-child{声明块}

4、选中奇数项元素，元素A:nth-child(odd){声明块}

odd，奇数（2n+1） n起始值是0，自增1

5、选中偶数项元素：元素A:nth-child(even){声明块}

even，偶数（2n）

选中第6个及以后的元素：n+6;

选中前3个，公式：-n+3

6、选中指定标签的第n个元素，元素A：nth-of-type(n){声明块}

选中第1个指定类型的标签，元素A：first-of-type{声明块}

选中最后1个指定类型的标签，元素A：last-of-type{声明块}

倒数选中目标元素：元素A：nth:last-of-type{声明块}

元素A：nth:last-chlid{声明块}

7· 否定伪类选择器，元素A:not(:nth-child(n)){声明块}

否定两个元素：元素A:not(:nth-child(n)：not(:nth-child(n)){声明块}

8· 选中无兄弟元素的标签：元素A:only-child{声明块}

9· 选中没有元素内容的标签：元素A:empty{声明块}

注：空格也算元素内容（空格和回车）

5、动态伪类选择器

:link 未访问

:hover 悬停

:active 点击

:visited 已访问

:focus 焦点、激活（键盘tab）

使用键盘进行页面的操作，输入框

书写顺序：link/visited(可换序，又叫静态伪类，仅适用于超链接)、hover、active

元素A：target{声明块}

跳转页面打开方式：target="_blank"(打开新页面) _self(默认值，当前页面)

还可以：在html里面添加锚点和css里添加display:none;可以隐藏内容，点击时才出现

6、伪元素选择器

在元素之前添加内容，元素A：:before{声明块}

在元素之后添加内容，元素A：:after{声明块}

注：用before或after都要在其css样式里添加content=“ 内容”；

如果是行内标签，设置宽高还需要改变display为inline-block

选中元素的第一行，元素A::first-line{声明块(color:red;)}

选中元素首字母下沉，元素A::first-letter{声明块(color:red;font-size:30px;)}

选中区域的样式添加，元素A::selection{声明块}

注：不能给空标记加伪元素，空标记是没有内容的

8、关于兼容性的问题？

什么是兼容性？

就是同一个元素，在不同的浏览器上它的样式不同

解决方式：引用CSS重置文件

reset.css 清除全部样式

normalize.css 保留一些样式，但在浏览器上都是一样的

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。