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>中设置的字体样式都是红色的。