伪类 :first-child和last-child

讲”伪类”之前我们首先讲一下”类”。 我们之前学过类，是通过向元素起名，就是给予一个class名称，通过class名称将这些元素归为一类。 而伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容。记住，是特征。 比如，当前这个元素的特点是，刚好有鼠标悬停，选定它可以用我们之前用过的:hover，这就是一个伪类。 再比如，某个元素排第一位，想选定它，可以改通过:first-child伪类，直译过来就是，第一个子女。

下面，我们介绍几个常用的伪类。

锚伪类

:link
:hover
:visited
:active

　　

这些就不多介绍了，大家用得很熟练了。

:first-child伪类

选定其父级第一个匹配的子元素。

例如： section:first-child{} 匹配其（section）父级中第一个元素为section的元素

语法：

元素:first-child{声明}/* 上面的是直接作用于元素，也可以用于css类。 */
类名:first-child{声明}

下面看下具体的例子。

<div>text</div>
<div>text</div>
<div class="content">  
    <h2>text</h2>  
    <div>text    
        <div>这里是红色</div>    
        <div>text</div>  
    </div>  
    <div>text</div>
</div>
<div class="content"> 
     <h2>text</h2> 
     <div>text</div> 
     <div>text</div>
</div>

css如下：

.content div:first-child {	color: #FF0000;}

CSS解读：匹配.content 中，所有div父级的第一个子元素的div元素。 这堂课看似简单。但依然需要吸收。否则很容易出现错误。

 

伪类:last-child

语法：

元素:last-child{声明}/* 上面的是直接作用于元素，也可以用于css类。 */
类名:last-child{声明}

下面看下具体的例子:

<div>text</div>
<div>text</div>
<div class="content">  
    <h2>text</h2>  
    <div>text    
        <div>text</div>    
        <div>这里是红色</div>  
    </div>  
    <div>这里是红色</div>
</div>
<div class="content">  
    <h2>text</h2> 
    <div>text</div>  
    <div>text</div>  
    <p>text</p>
</div>

css样式：

.content div:last-child {	color: #FF0000;}

　　

 

 

 

相关英语

first = 第一，第一位，第一名

child = 子女，孩子

last = 最后，最末