CSS3的content屬性實作步驟-css教學-PHP中文網

首頁

web前端

css教學

CSS3的content屬性實作步驟

php中世界最好的语言

Dec 01, 2017 am 10:01 AM

content css3

我們知道，在CSS3中出現了:before",":after"的偽類，那麼今天就來教大家CSS3的content屬性實現步驟，下面是案列，一起來看一下。

css3中出現了 ":before",":after"偽類，

你可以這樣寫：

h1:after{
content:&#39;h1后插入的文本&#39;;
...}

登入後複製

這兩個選擇器的作用以及效果，這裡就不在介紹了；主要說上面提到的一個css屬性content用來和:after及:before偽元素一起使用，在物件前後顯示內容。 #normal：預設值。圖像，聲頻，視訊或瀏覽器支援的其他任何資源）：插入字串

counter(name)：使用已命名的計數器

counter(name,

list-style-type

)：使用已命名的計數器並遵從指定的list-style-type屬性

counters(name,string)：使用所有已命名的計數器

counters(name,string,list-style-type)：使用所有已命名的計數器並遵從指定的list-style-type屬性no-close-quote：並不插入quotes屬性的後標記。

open-quote：插入quotes屬性的前標記

這裡比較不好理解的取值就是：counter(name)這些;

下面主要總結一下這塊，最後會給出各個取值的demo，

例如我有以下html結構：

<ul>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li></ul>

登入後複製

我要在每個li的後面加上當前li index值：

ul li{
counter-increment:index;
}
ul li:after{
content:&#39;统计：&#39;counter(index);
display:block;
line-height:35px;
}

登入後複製

解釋：

count(name)這裡的name，必須事先指定好，否則所有的值都會是0;

count(name,list-style-type)這裡的list-style-type就是css中list-style-type屬性的取值；

下面給出完整DEMO

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>
.string p:after {
margin-left: -16px;
background: #fff;
content: "支持";
color: #f00;}
.attr p:after {
content: attr(title);}
.url p:before {
content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);
display: block;}
.test ol {
margin: 16px 0;
padding: 0;
list-style: none;}
.counter1 li {
counter-increment: testname;}
.counter1 li:before {
content: counter(testname)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter2 li {
counter-increment: testname2;}
.counter2 li:before {
content: counter(testname2,lower-roman)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter3 ol ol {
margin: 0 0 0 28px;}
.counter3 li {
padding: 2px 0;
counter-increment: testname3;}
.counter3 li:before {
content: counter(testname3,float)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter3 li li {
counter-increment: testname4;}
.counter3 li li:before {
content: counter(testname3,decimal)"."counter(testname4,decimal)":";}
.counter3 li li li {
counter-increment: testname5;}
.counter3 li li li:before {
content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul>
<li>
<strong>string：</strong>
<p>你的浏览器是否支持content属性：否</p>
</li>
<li>
<strong>attr：</strong>
<p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
</li>
<li>
<strong>url()：</strong>
<p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p>
</li>
<li>
<strong>counter(name)：</strong>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>
<strong>counter(name,list-style-type)：</strong>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>
<strong>counter(name)拓展应用：</strong>
<ol>
<li>列表项
<ol>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>列表项</li>
</ol>
</li>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
</ol>
</li></ul></body></html>

登入後複製

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！