CSS常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！
一、通配符选择器
通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
例子 使用该选择器定义样式，清除所有HTML标记的默认边距。
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。
二、标签选择器
标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
例子 使用p选择器定义HTML页面中所有段落的样式。
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
三、类选择器
类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。
基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。
例子
1
2
3
4
5
6
12
13
14
二级标题文本
15
段落文本内容
16
段落二文本内容
17
段落三文本内容
18
19
类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的前两个
标记。
注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。
四、id选择器
id选择器使用**‘#’**进行标识，后面紧跟id名。
基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例子
1
2
3
4
5
6
10
11
12
13
段落2: id="font24", 设置字号为24px。
14
段落3: id="font24", 设置字号为24px。
15
16
17
注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。
五、属性选择器
属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
CSS 选择器参考手册：
选择器描述[attribute]用于选取带有指定属性的元素[attribute=value]用于选取带有指定属性和值的元素[attribute~=value]用于选取属性值中包含指定词汇的元素[attributeI=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词[attribute^=value]匹配属性值以指定值开头的每个元素[attribute$=value]匹配属性值以指定值结尾的每个元素[attribute*=value]匹配属性值中包含指定值的每个元素
例子
1、为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
2、为 title=“W3School” 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
5、设置表单的样式 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。
六、并集选择器
并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如em,strong{ }。
语法格式： 标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}
例子
博客园
网页设计
并集选择器的优点是将多个标签的相同样式 提取出来，集体声明，优化代码，方便阅读。
七、后代选择器
后代选择器也称包含选择器，用来选择特定元素的后代。如.asideNav li{ }，表示先匹配第二个选择器的元素，并属于第一个选择器内。
语法格式： 标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}
在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。
定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。如：
div p { color: red; }
上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论 p 是 div 的多少辈的后代，p 元素中的文本都会变成红色。
例子
后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。根据需要，从任一个祖先元素开始，直到想应用样式的那个元素，都可以被放到后代选择器链中。如：
上述导航菜单中，假如希望所有锚文本的字体大小是16px，就可以通过后代选择器ul a来选择 ul 元素的所有后代，因为后代选择器会影响到它的各级后代。如：
ul a {
font-size: 16px;
}
假如又希望第二级列表项的锚文本的字体大小是12px，就可以通过ul.nav ul a的这种多层后代关系的后代选择器，它只选择第二级列表项的锚文本。
ul li a {
font-size: 12px;
}
当然，这个后代选择器也可以写成ul、li、ul、li、a，以实现更精准的控制。
注意： 1、后代包括儿子，孙子，只要是放在指定标签的后代都是。 2、也可以不用标签名称1、2，也可以用id和class名，分别用id和class来选择。 3、后代选择器可以无限衍生。
八、子代选择器
子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。
语法格式： 标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}
例子
狸花猫
大橘猫