CSS3 content屬性學習

時間 2019-12-08

標籤 css3 css content 屬性學習欄目 CSS 简体版

原文原文鏈接

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

你能夠這樣寫：css

h1:after{
　　content:'h1後插入的文本';
　　...
}

這兩個選擇器的做用以及效果，這裏就不在介紹了；主要說一下上面提到的一個css屬性【content】用來和:after及:before僞元素一塊兒使用，在對象前或後顯示內容。html

content的取值：
normal：默認值。表現與none值相同
none：不生成任何值。
<attr>：插入標籤屬性值
<url>：使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其餘任何資源）
<string>：插入字符串
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屬性的後標記。但增長其嵌套級別
no-open-quote：並不插入quotes屬性的前標記。但減小其嵌套級別
close-quote：插入quotes屬性的後標記
open-quote：插入quotes屬性的前標記

這裏比較很差理解的取值就是：counter(name)這些；css3

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

好比我有以下html結構：url

<ul>
    <li>這個是有序列表</li>
    <li>這個是有序列表</li>
    <li>這個是有序列表</li>
    <li>這個是有序列表</li>
    <li>這個是有序列表</li>
</ul>

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

ul li{
  counter-increment:index;
}
ul li:after{
    content:'統計：'counter(index);
    display:block;
    line-height:35px;
}

效果如圖：.net

解釋：code

　　count(name)這裏的name，必需要提早指定好，不然全部的值都將是0；orm

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

下面給出完整DEMO

<!DOCTYPE html>
<html lang="zh-cn">
<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 class="test">
    <li class="string">
        <strong>string：</strong>
        <p>你的瀏覽器是否支持content屬性：否</p>
    </li>
    <li class="attr">
        <strong>attr：</strong>
        <p title="若是你看到我則說明你目前使用的瀏覽器支持content屬性"></p>
    </li>
    <li class="url">
        <strong>url()：</strong>
        <p>若是你看到個人頭像圖片則說明你目前使用的瀏覽器支持content屬性</p>
    </li>
    <li class="counter1">
        <strong>counter(name)：</strong>
        <ol>
            <li>列表項</li>
            <li>列表項</li>
            <li>列表項</li>
        </ol>
    </li>
    <li class="counter2">
        <strong>counter(name,list-style-type)：</strong>
        <ol>
            <li>列表項</li>
            <li>列表項</li>
            <li>列表項</li>
        </ol>
    </li>
    <li class="counter3">
        <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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。