CSS笔记——伪元素选择器（三）

最新推荐文章于 2022-07-04 16:11:33 发布

weixin_34383618

最新推荐文章于 2022-07-04 16:11:33 发布

阅读量105

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/kellybaby/p/6645257.html

版权

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>