码迷,mamicode.com
首页 > 其他好文 > 详细

【前端开发系列】—— 利用选择器添加内容

时间:2014-09-15 19:24:19      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   for   2014   div   sp   

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。

  也可以通过变量来实现自定义的标题

1     h1:before{
2             content:‘第‘counter(mycounter)‘章‘;
3             color:red;
4             font-size:30px;
5         }
6         h1{
7             counter-increment:mycounter;
8         }

  代码样例

<html>
<head>
    <style type="text/css">
        h1:before{
            content:‘第‘counter(mycounter)‘章‘;
            color:red;
            font-size:30px;
        }
        h1{
            counter-increment:mycounter;
        }
        p:before{
            content:open-quote;
        }
        p:after{
            content:close-quote;
        }
        p{
            quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</body>
</html>

  实现样例

bubuko.com,布布扣

【前端开发系列】—— 利用选择器添加内容

标签:style   blog   http   color   os   for   2014   div   sp   

原文地址:http://www.cnblogs.com/xing901022/p/3973449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!