CSS之伪元素

1.:first-line

向元素的首行文本添加样式，不必关心首行是元素节点还是文本节点

<style>
body,htm,div,p{
    margin:0;
    padding:0;
}
div{
    width:100px;
    height:100x;
    background-color:#FC9;
}
p{
    height:50px;
    text-align:center;
    line-height:50px;
}
div > p:first-child{
    background-color:#F90
}
div > p:last-child{
    background-color:#6CC
}
div:first-line{
    color:red;
    background-color:green;
}
</style>

<div>
     <p>p1</p>
     <p>p2</p>
 </div>

<style>
body,htm,div,p{
    margin:0;
    padding:0;
}
div{
    width:100px;
    height:100px;
    background-color:#FC9;

}
p{
    height:50px;
    text-align:center;
    line-height:50px;
}
div > p:first-child{
    background-color:#F90
}
div > p:last-child{
    background-color:#6CC
}
div:first-line{
    color:red;
    background-color:green;
}
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
 </div>

由于文本超过div的宽度，换行后，只有第一行有效果

2.:first-letter

向文本的第一个字母添加特殊样式

<style>
div:first-letter{
    color:red;
}
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
</div>

3.

:before 表示在元素的内容之前新插入内容(多媒体或者纯文本)

:after 表示在元素的内容之后新插入内容(多媒体或者纯文本)

<style>
div:before{
    content:url(images/info.png);
}
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
 </div>

<style>
div{
    width:300px;
    height:300px;
    background-color:#FC9;
    text-align:center;
}
div:before{
    content:url(images/info.png);
}
div:hover:after{
    content:"This is after";
    background-color:green;
    width:100px;
    height:100px;
    display:block;
    margin:0 auto;
}
</style>

<div>
        This is first line
        <p>p1</p>
        <p>p2</p>
</div>