使用選擇器在頁面中插入內容

最新推荐文章于 2020-12-05 09:33:14 发布

lulu_jiang

最新推荐文章于 2020-12-05 09:33:14 发布

阅读量3k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7797406

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用選擇器來插入文字

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2:before{content:'Hello';color:White;background-color:Orange;}
        h2.test:before{content:none;}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2 class="test">標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

插入圖像文件

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2.new:after{content:url(test.jpg)}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2 class="new">標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

使用content屬性來插入項目編號

1.在多個標題前加上連續編號

<元素> : before { content : counter(計數器名); }

<元素> { counter-increment : 計數器名 }

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2:before{content:counter(mycounter);}
        h2{counter-increment:mycounter;}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2>標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

2.在項目編號中追加文字

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2:before{content:'第'counter(mycounter)'章：';}
        h2{counter-increment:mycounter;}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2>標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

3.指定編號樣式

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2:before{content:'第'counter(mycounter)'章：';color:blue;}
        h2{counter-increment:mycounter;}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2>標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

4.指定編號的種類

content : counter(計數器名, 編號種類);

upper-alpha屬性：指定大寫字母

upper-roman屬性：大寫羅馬數字

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h2:before{content:counter(mycounter,upper-alpha);}
        h2{counter-increment:mycounter;}
        </style>
    </head>
    <body>
        <h2>標題1</h2>
        <h2>標題2</h2>
        <h2>標題3</h2>
    </body>
</html>

5.編號嵌套

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h1:before{content:counter(mycounter) '.';}
        h1{counter-increment:mycounter;counter-reset:mycounter2;}
        h2:before{content:counter(mycounter2) '.';}
        h2{counter-increment:mycounter2;}
        </style>
    </head>
    <body>
        <h1>大標題1</h1>
        <h2>小標題1</h2>
        <h1>大標題2</h1>
        <h2>小標題2</h2>
        <h1>大標題3</h1>
        <h2>小標題3</h2>
        <h2>小標題4</h2>
    </body>
</html>

6.大編號嵌入小編號

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h1:before{content:counter(mycounter) '.';}
        h1{counter-increment:mycounter;counter-reset:mycounter2;}
        h2:before{content:counter(mycounter) '-' counter(mycounter2) '.';}
        h2{counter-increment:mycounter2;}
        </style>
    </head>
    <body>
        <h1>大標題1</h1>
        <h2>小標題1</h2>
        <h1>大標題2</h1>
        <h2>小標題2</h2>
        <h1>大標題3</h1>
        <h2>小標題3</h2>
        <h2>小標題4</h2>
    </body>
</html>

7.在字符串兩邊添加嵌套文字符號

使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊加入嵌套文字符號，使用quotes屬性來指定使用什麽嵌套文字

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        h1:before{content:open-quote;}
        h1:after{content:close-quote;}
        h1{quotes:"\"" "\""}
        </style>
    </head>
    <body>
        <h1>大標題1</h1>
    </body>
</html>