CSS笔记——伪元素选择器(三)

1、首字放大、首行变色等效果的实现,是由伪选择器实现的

 

1):first-letter

2):first-line

3):before

4):after

 

这些伪选择器可以对div、section、p  等标签起作用,如果要对span起作用。

需要对span设置width、height,或者将position设置为absolute、或者将display设置成block。

 

:first-letter  代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title> 
        <style type="text/css">
            span{
                display: block;
            }
            span:first-letter{
                color: #f00;
                font-size: 20pt;
            }
            section:first-letter{
                color:#00f;
                font-size: 30pt;
                font-weight: bold;
            }
            p:first-letter{
                color:#00f;
                font-size: 40pt;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <span>师然学习H5</span>
        <section>师然学习JAVA</section>
        <p>师然学习iOS</p>
    </body>
</html>

 

:first-line代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title> 
        <style type="text/css">
            span{
                display: block;
            }
            span:first-line{
                color: #00FF00;
            }
            section:first-line{
                color: #00FFF0;
            }
           
        </style>
    </head>
    <body>
        <span>
            师然学习H5
            <br/>
            师然学习java
        </span>
        <section>
            师然学习安卓
            <br/>
            师然学习iOS
        </section>
    </body>
</html>

 

:before和:after在后面章节在做示例。

 

posted @ 2017-03-30 11:38  师然  阅读(285)  评论(0编辑  收藏  举报