几种css选择器

css提供了许多选择器来实现精确地定位标签元素，主要有以下几种：

• 标签选择器
  通过html标签名来选择元素，写法为标签名{属性:属性值;}，比如：

div{
	color: red;             /* 标签选择器，选择所有的div标签，给予color: red;的样式。*/
}
p{
	font-size: 20px;       /* 标签选择器，选择所有的p签，给予font-size:20px;的样式。*/
}

• class选择器
  通过class名来选择元素，写法为**.class名{属性:属性值;}**,比如：

.box{
	color:red;      /*class选择器，选择所有class名为“box”的元素,给予color: red;的样式。*/
}

<div class="box"></div>   <!-- div的class名为“box”，因此应用上面的样式。-->
<p class="box"></p>   <!-- p的class名为“box”，因此应用上面的样式。-->

可以看出，div标签和p标签的class名都为“box”，因此他们都应用该样式，因为多个标签可以有相同的class名，所以class选择器应用最为广泛。

• id选择器
  通过id名来选择元素，写法为**#id名{属性:属性值;}**,比如：

#box{
	color:red;    /*id选择器，选择id名为“box”的元素，给予color: red;的样式。 */
}

<p id="box"></p>  <!-- p的id名为“box”，因此应用上面的样式-->

需要注意的是，标签的id具有唯一性，多个标签的id不能相同，因此id选择器使用较少，一般用在内容十分重要或者特殊的地方。

• 后代选择器
  后代选择器是指选定某个标签的某种后代元素然后给予样式。后代选择器有两种：

1. 子选择器
   选定某个标签的某个子元素给予样式，如果不是子元素比如孙子元素重孙子元素等等则不给予样式。写法为 选择器名>选择器名{属性:属性值;},这里的选择器名可以是标签选择器，id选择器，class选择器，可自己设计。
   两个选择器名都是标签：

div>p{
	color:red;    /* 选择div标签里的为p标签的子元素，给予color: red;的样式。*/
}

<div>
	<p>我会应用样式</p>                <!--该p标签为div的子元素，会应用样式-->
	<div>
		<p>我不会应用样式</p>     <!--该p标签为div的孙子元素，不会应用样式-->
	</div>
</div>

两个选择器名含有class名：

.box>p{
 color:red;    /* 选择class名为“box”的标签里的为p标签的子元素，给予color: red;的样式。*/
}

<div class="box">
	<p>我会应用样式</p>                <!--该p标签为div的子元素，会应用样式-->
 	<div>
	 	 <p>我不会应用样式</p>     <!--该p标签为div的孙子元素，不会应用样式-->
 	</div>
</div>

<div class="domo">
	<p>我不会应用样式</p> 	<!--该div的class名不为“box”，不会应用样式 -->
</div>

同理，选择器名可以为id名标签名，甚至id名class名，当然要看实际需要我们设计什么样的。

2. 所有后代选择器
   选定某个标签的某种所有后代元素，给予样式，写法为 选择器名 选择器名{属性:属性值;}，两个选择器名中间用空格隔开。同子选择器，两个选择器名可以是标签，id名，class名。
   下面就举两个标签名的例子：

div p{
	color:red;  /*选择div标签里所有的p标签，给予color: red;的样式。*/
}

<div>
	<p>我会应用样式</p> 			<!-- 该p标签为子元素，应用样式。-->
	<ul>					<!-- 无序列表。-->
		<li><p>我会应用样式</p></li>  <!-- 该p标签为孙子元素，应用样式。-->
	</ul>	
</div>

其他的组合大家可以自行探索，但需要注意id名具有唯一性，class名没有唯一性。

• 兄弟选择器
  选择某一个标签的兄弟标签来给予样式，并且只能选择出现在该标签之后的兄弟元素，之前的不行。也分为两种：

1. 毗邻兄弟选择器
   只选择某个标签的相邻的一个兄弟标签给予样式，也就是说它只会选择一个标签，写法为：选择器名+选择器名{属性:属性值;},这里的选择器名也可以为标签名，id名，class名。
   两个标签名：

div+p{
	color:red;   /* 选择div的下一个为p标签的兄弟元素，给予color: red;的样式。*/
}

<div>	</div>
<p>我会应用样式</p>   <!--该p是div后的第一个兄弟元素，应用样式。-->
<p>我不会应用样式</p>   <!--该p是div后的第二个兄弟元素，不应用样式。-->

<div> </div>
<span>我不会应用样式</span>   <!--该span是div后的第一个兄弟元素，但不是p，不应用样式。-->
<p>我不会应用样式</p>   <!--该p是div后的第二个兄弟元素，不应用样式。-->
`

其他的组合同理，毗邻选择器强调的是相邻，一个。

2 所有兄弟选择器。
选择某个标签的所有兄弟元素，给予样式，写法为 选择器名~选择器名{属性:属性值;},这里的选择器名也可以为标签名，id名，class名。
也只举两个标签名的例子：

div~p{
	color:red; /*选择div标签之后的所有为p的兄弟标签，给予color: red;的样式。*/
}

<div></div>
<p>我会应用样式</p>   <!-- 该p标签是div兄弟元素，应用样式-->
<p>我会应用样式</p>   <!-- 该p标签是div兄弟元素，应用样式-->

• 交集选择器
  如果多个类型的标签有相同的class名，可以通过 **标签名.class名{属性:属性值;}**来选择，注意标签名和.class名之间紧挨不能加空格。

p.domo{
	color:red; /*选择class名为“demo”的p标签，给予color: red;的样式。*/
}

<div class="demo">不会应用样式</div> 
<span class="demo">不会应用样式</span>     <!--这三个class名相同，但只有p标签会应用样式-->
<p class="demo">会应用样式</p>

• 通配符
  通配符会选择文档里的所有标签给予样式，写法 *{属性:属性值;}.

*{
	margin:0;   /* 所有的标签都会应用该样式*/
}