CSS选择器 - 1 基本选择器

1.基本选择器

选择器	类型	功能描述
E	标签选择器	选择指定的HTML标签
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择之类 class 属性为“class”的任意类型的任意多个元素
sleector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并
*	通配选择器	选择文档中所有的HTML元素

 

1.1 标签选择器
标签选择器（E)是CSS选择器中最常见、最基本的选择器。文档的标签包括html、body、div、p、div等，示例中ul、li也属于HTML标签。

li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;}
ul{background: grey;} /* 通过ul元素选择器改变整个列表的背景色 */

1.2 ID选择器
在使用ID选择器(#id)之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不会同事出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上"#"号，如（#id）。

<li id="first">1</li>
<style>
#first{background: lime;color: #000;} /* 改变id为first的元素的背景色和文字颜色 */
</style>

1.3 类选择器(.class)
1.3.1 单个类选择器：
是以独立于文档元素的方式来制定元素样式。使用方法与ID选择器及其相似，所限在HTML 给需要的元素定义class属性，并为其设置属性值。其与ID选择器有一个很大不同之处。类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个。

1.3.2 多类选择器用法：
通过两个或两个以上类选择器合并，来定义有区别于一个类名的元素效果。

<li class="item">1</li>
<li class="item important">2</li>
<style>
    .item{background: green;color: #fff;font-weight: bold;} /* 通过类选择器改变元素的样式 */
    .item.important{background: red;}   /* 多类选择器用法 */
</style>

1.4 群组选择器
群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用逗号（,）隔开，例如：使用逗号对选择器进行分隔，使用页面中所有的p, span, .blue, #blue都具有相同的样式。这样做的好处是，需要使用相同样式的地方只需要书写一次，可以减少代码量，改善CSS代码的结构，提高网页的性能。

p, span, .blue, #blue { color: blue; }

1.5 通配选择器
通配选择器（*）用来选择所有元素。当然也可以选择某个元素下的所有元素。如：

*{margin: 0;padding: 0;}