HTML+CSS基础篇5----选择器详解
选择器的分类可分为基本选择器，复合选择器，CSS3中新增的选择器三种类型来讲解。
1.基本选择器
在上一篇博客中已经介绍过基本选择器，在这里直接COPY过来。
1）类选择器
...
这是一个重点内容
....important_point{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}2）id选择器
...
这是一个重点内容
...#important_point{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}3）标签选择器
...
这是一个重点内容
...p{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}三种选择器的效果是一样的：
总结：
类选择器：格式(class="类名"),一个标签可以有多个类，多个标签也可以同属同一个类。css表示方法(.类型{属性名=属性值；})
id选择器：格式（id="id名"),一个标签只有有一个属性名，同时id名是唯一的，不同的标签不能使用同一个id名。css表示方法(.id名{属性名=属性值；})
标签选择器：直接使用标签即可.css使用方式(标签{属性名=属性值；})
2.复合选择器
1）交集选择器
交集选择器是由两个选择器直接构成的，结果是选中两个选择器各自范围的交集（第一个必须是标签选择器，第二个必须是类选择器或者ID选择器）
标签选择器与类选择器形成的交集选择器
这是一个玩具
div.toy{
corlor:blue;
font-size:20px;
}
标签选择器与id选择器形成的交集选择器
这是一个玩具
div#toy{
corlor:blue;
font-size:20px;
}
2）并集选择器
就是同时选择多个选择器，多个选择器之间用","隔开，每个选择器可以是任何类型的选择器。
div,h1,p{
....
}
div.class1,#toy,p{
....
}
3）后代选择器
后代选择器是通过嵌套的方式，对特殊位置的HTML标签进行控制，写法是把外层标签写在前面，内层标签写在后面，标签与标签之间使用空格隔开。
div li{
....
}
div li a{
....
}
4）子选择器
子选择器用于选中标签的直接后代（就是儿子，不是孙子），定义符号是大于号(>)
div>li{
....
}
5) 相邻选择器
相邻选择器的定义符号是（+），可以选择紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）
测试专用
略略略略略略
本行是相邻选择器,所以字体颜色是红色
本行不与div相邻，所以字体颜色不是红色
效果如下图所示：
3.CSS3新增的选择器
在这里用一张思维导图来说明，显示的部分都是常用的，没有显示的部分都是不常用的。
本博客由博主原创，如需转载需说明出处！谢谢支持！