要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。

类选择器：

类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”

例子：

样式会作用于class类型为shasha的标签内容上，类名可以随便取，别用中文。

ID选择器

ID选择器与类选择器大致相同，不同的是：

• ID选择起标签内部指定ID；
• ID选择器前面不用点”.”，而用井号”#”
• ID选择器只能起一个ID名；类选择器可以起多个类名。

例子：

子选择器：

小于这个类的子标签

例子：

.shasha>li{    border:1px solid red;}

所有后代标签选择器

小于号代表第一个后代，空格可以指定其所有后代标签

例子：

.shasha li{    border:1px solid red;}

通用选择器

通用选择器，选择html文档中的所有标签。

*{    border:1px solid red;    font-size:20px;}

伪类选择符

给标签的某一个状态设定一个类，例如超链接标签可以设置为鼠标停留后显示别的颜色。

最常用的也就是a:hover

a:hover{    color:red;    font-size:20px;    }

分组选择符

选择符中间以逗号隔开，等于同时给多个选择符添加样式

.shasha,#shasha2 span{    color:red;}

标签选择器：

直接以html中的标签作为选择器：如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，也称元素选择器

总结：

1. 普通标签选择：以html中的标签选择
2. 类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用
3. ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。
4. 子选择器：用小于号分隔，指其选择器中的子标签
5. 包含选择器：用空格分隔，指其选择器中的所有后代标签
6. 通用选择器：对html中所有的标签有效
7. 伪类选择器：给标签的一个动作添加一个选择器
8. 分组选择器：逗号分隔，同时作用给多个标签

CSS 选择器参考手册：

原文作者：祈澈姑娘

原文链接：

创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

有个很难涨粉的的公众号叫：【编程微刊】

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：

福利二：微信小程序入门与实战全套详细视频教程

image

领取方式：

如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

原文作者：祈澈姑娘

原文链接：

创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。