1 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
2 类选择器（最常用）
.类选器名称{css样式代码;}
英文圆点开头 类选择器可以任意起名
.stress{
color:red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
3 ID选择器
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
#stress{
color:red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
4 类选择器和ID选择器的区别
（1） ID选择器只能用一次因为id是唯一的 类选择器可以用多次
（2）可以使用类选择器词列方法为一个元素同事设置多个样式ID选择器不可以
//可以
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
//不可以
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>
4 子选择器
大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
5 包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}
.food li{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
6 通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素，
如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
7 伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式，
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了
（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。
其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，
所以现在比较常用的还是 a:hover 的组合。
8 当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），
如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
它相当于
h1{color:red;}
span{color:red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
相关推荐
React组件的css选择器
CSS选择器-.pdf
css选择器里面有css的几十种选择、获取、什么都有.
各类css选择器的应用及代码效果展示，字体属性和文本属性的应用。
CSS选择器的介绍和使用,什么是CSS选择器？CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一，一对多或者多对一的控制，就得要使用css选择器，css选择器进控制着HTML页面中的元素。
讲解了css选择器的要点和应用，分别写出了在什么场景用什么选择器，每个选择都有他自己书写规范和应用。
一个使用css选择器的完整爬虫工程，比本人前面两个相应资料更完整，与博文同步分享。
前端必须掌握的css选择器方法
* css选择器 * 冒泡原理 * 如果后面的表达式无效，只返回有效表达式匹配的结果 * author chenyipeng * e-mail: yia0223@gmail.com * ps: 如有bug请多多包涵 * 参考： jquery css选择器 * 目前实现 * #id ...
div h1~div: 应返回一个节点，但是Sizzle没有找到节点另外div.querySelectorAll("body *")会返回节点所以在以元素为context的查询中不使用querySelectorAll进行优化3, 性能将选择器编译成函数再进行查询，除了第一次...
jQuery 遍历css选择器 学习
CSS选择器笔记
30个最常用css选择器解析 CSS
脑图形式的css选择器和层叠规则整理，包括css选择器的类型以及css层叠规则的影响因素（重要性、来源、特殊性、顺序等等），属于前端基础技术的资源
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
python爬虫 css提取网页内容的详细方法，有助于新手可以轻松上手，内容简单易懂，轻松掌握css的使用
CSS选择器 xmind - 选择器分类(ID选择器，类选择器，标签选择器，通配选择器，属性选择器，伪类选择器)。 - 选择器关系(分组，后代，子元素，相邻兄弟，后续兄弟)。 - CSS特性(优先级，继承，层叠)。
做个试验。。。。。做个小试验。。。做个试验。。。。。做个小试验。。。做个试验。。。。。做个小试验。。。做个试验。。。。。做个小试验。。。做个试验。。。。。做个小试验。。。CSS。。CSS