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

原文地址:https://www.cnblogs.com/carrier-sisi/p/7595697.html