css常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，我们一起来看看吧！
一. 通配符选择器
通配符选择器常用' * '号表示，他是所有选择器里作用范围最广的，能匹配页面中所有的元素。
基本语法格式： *{属性：属性值；}
例子
使用该选择器定义样式，清除所有HTML标记的默认边距。
*{
margin：0; /* 定义外边距 */
padding：0; /* 定义内边距 */
}但是在实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。
二. 标签选择器
标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式： 标签名{ 属性：属性值；}
所有的HTML标记名都可以作为标签选择器，例如：div, a, p, h1,span, 等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
例子
使用span选择器定义HTML页面中所有段落的样式。
span{
font-size:20px;
color:#222;
font-family:"仿宋"；
}标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
三. 类选择器
类选择器使用‘ . ’(英文点号)进行标识，后面紧跟类名。
基本语法格式： .类名{ 属性：属性值；}
该语法中，类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.blue {
color: blue;
}
h1 {
color: brown;
}
.fon {
font-size: 15px;
}
.aqua {
color: aqua;
}
</style>
</head>
<body>
<h2>我是二级标题</h2>
<span class="blue">我是span标签</span>
<p class="brown fon">我是一个p标签</p>
<p class="aqua fon">我是第二个p标签</p>
</body>
</html>类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的两个<p>标记。
*注意： 类名的第一个字符不能以数字开头，并且严格区分大小写。
四. id选择器
id选择器使用‘ # ’进行标识，后面跟着id名。
基本语法： #id名{ 属性：属性值；}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中某一个具体元素。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#fon {
font-size: 25px;
}
#bold {
font-weight: bold;
}
</style>
</head>
<body>
<span >我是span标签:加粗字体</span>
<p >我是一个p标签,字号25px</p>
<p >我是第二个p标签,字号25px</p>
</body>
</html>注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。
五、属性选择器
属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法格式：[标签名称]{ 属性：属性值；}
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
例子
span{
color：#666;
}
div{
width:200px;
height:200px；
border：3px solid red；
}六. 并集选择器
并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如p,div{ }。
语法格式：标签名1，标签名2{ 属性：属性值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
span,p{
color: red;
}
</style>
</head>
<body>
<span>我是span标签</span>
<p>我是一个p标签</p>
<p>我是第二个p标签</p>
</body>
</html>并集选择器的优点是将多个标签的相同样式提取出来，集中声明，优化代码，方便阅读。
七. 后代选择器
后代选择器也称包含选择器，用来选择特定元素的后代。如.unborn li{ }，表示先匹配第二个选择器的元素，并属于第一个选择器内。
语法格式：标签名称1 标签名称2{属性：属性值；}
在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。
定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。如：
div span{color：red；}上述选择器中，div 为祖先元素，span 为后代元素，其作用就是选择 div 元素的所有后代 span元素，不管 span 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论 span是 div 的多少辈的后代，span元素中的文本都会变成红色。
例子
<ul>
<li><span>首页</span></li>
<li><span>课程</span></li>
<li><span>问答</span></li>
<li><span>社区</span></li>
</ul>上述中，假如希望所有锚文本的字体大小是20px，就可以通过后代选择器ul span来选择 ul 元素的所有后代，因为后代选择器会影响到它的各级后代。如：
ul span{
font-size：20px；
}注意：
1、后代包括儿子，孙子，只要是放在指定标签的后代都是。
2、也可以不用标签名称1、2，也可以用id和class名，分别用id和class来选择。
3、后代选择器可以无限衍生。
八. 子代选择器
子代选择器使用' > '表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。
语法格式：标签名称1>标签名称2{属性：属性值}
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<style>
.box>p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>手机</p>
</div>
<p>电脑</p>
</div>
</body>
</html>注意：
1、只会查找儿子，不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。
3、子元素选择器也可以通过>符号一直延续下去。
等............