CSS——选择器2

1.子选择器

（1）.用于指定标签元素的第一代子元素，使用">"号。

（2）.例子：

<style type="text/css">

.food>li{border:1px soild red;}

.first>span{border:1px solid red;}

</style>

...

<p class="first">三年级时，<span>我还是一个胆小如鼠的小女孩</span>，

<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>

（3）.效果：

2.包含（后代 ）选择器

（1）用于选择指定标签元素下的后辈元素，作用于所有后代元素。

（2）语法 .first span{color:red}

（3）例子：

<style>

.food li{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}

</style>

<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>

（4）效果

3.通用选择器

（1）匹配HTML中所有的标签元素

（2）语法：*{color:red;}

（3）效果：使用所有在标签内的字体变为红色。

4.伪类选择器

（1）使鼠标滑过标签字体呈现出设置的样式，鼠标不在即字体恢复原样。

（2）语法：a:hover{color:red;}

（3）例子:

<style type="text/css">
a:hover{
color:red;
font-size:20px;
}
</style>

...

<p class="first">

三年级时，我还是一个

<a href="http://www.imooc.com">胆小如鼠</a>

（4）效果：

 →

5.分组选择器

（1）为HTML中多个标签设置同一个样式，使用“，”。

（2）语法：h1,span{color:red;}

在<h1>和<span>中设置的字体样式都是红色的。