前端css常用的选择小汇
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。
类选择器：
类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”
例子：
<head>
<style type="text/css">
.shasha{
color:red;
font-size:20px;
}
<style>
</head>
<body>
<h1 class="shasha">标题</h1>
<p class="shasha">第一段</p>
<p> 第二段</p>
</body>
样式会作用于class类型为shasha的标签内容上，类名可以随便取，别用中文。
ID选择器
ID选择器与类选择器大致相同，不同的是：
- ID选择起标签内部指定ID；
- ID选择器前面不用点”.”，而用井号”#”
- ID选择器只能起一个ID名；类选择器可以起多个类名。
例子：
<head>
<style type="text/css">
#shasha2{
color:red;
font-size:20px;
}
<style>
</head>
<body>
<h1 id="shasha2">标题</h1>
<p id="shasha2">第一段</p>
<p> 第二段</p>
</body>
子选择器：
小于这个类的子标签
例子：
.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 本身，也称元素选择器
<style tye="text/css">
p{
font-size:12px;
line-height:1.6em;
}
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
总结：
- 普通标签选择：以html中的标签选择
- 类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用
- ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。
- 子选择器：用小于号分隔，指其选择器中的子标签
- 包含选择器：用空格分隔，指其选择器中的所有后代标签
- 通用选择器：对html中所有的标签有效
- 伪类选择器：给标签的一个动作添加一个选择器
- 分组选择器：逗号分隔，同时作用给多个标签
CSS 选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
