CSS3-Inhaltsattribut-CSS-Tutorial-php.cn

CSS3-Inhaltsattribut

伊谢尔伦

Freigeben： 2017-02-03 14:08:38

Original

1856 Leute haben es durchsucht

Es gibt vier Hauptpseudoelemente in CSS: Vorher/Nachher/Anfangsbuchstabe/Erste Zeile Im Vorher/Nachher-Pseudoelementselektor gibt es ein Inhaltsattribut, das Inhalte in die Seite einfügen kann.

Nur-Text einfügen

Inhalt: „Eingefügter Artikel“ oder content:none fügt keinen Inhalt ein

#html
<h1>这是h1</h1>
<h2>这是h2</h2>
#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

Nach dem Login kopieren

Eingebettete Textsymbole

können sein Verwendet Der Attributwert für offene Anführungszeichen und der Attributwert für geschlossene Anführungszeichen des Inhaltsattributs fügen auf beiden Seiten der Zeichenfolge verschachtelte Textsymbole wie Klammern, einfache Anführungszeichen und doppelte Anführungszeichen hinzu. Open-Quote wird verwendet, um das Starttextsymbol hinzuzufügen, und Close-Quote wird verwendet, um das Endtextsymbol hinzuzufügen. Ändern Sie das obige CSS:

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

Nach dem Login kopieren

Bild einfügen

Inhaltsattribut Sie können Bilder auch direkt vor/nach dem Element einfügen

#html
<h3>这是h3</h3>

#css
h3::after{
    content:url(图片路径)
}

Nach dem Login kopieren

Fügen Sie den Attributwert des ein Element

Das Inhaltsattribut kann attr direkt verwenden, um die Attribute des Elements abzurufen und an der entsprechenden Position einzufügen.

#html
<a href="//m.sbmmt.com">这是链接</a>

#css
a:after{
    content:attr(href);
}

Nach dem Login kopieren

Artikelnummer einfügen

Verwenden Sie das Zählerattribut des Inhalts, um fortlaufende Nummern an mehrere Artikel anzuhängen.

#html
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>

#css
h1:before{
    content:counter(my)&#39;.&#39;;
}
h1{
    counter-increment:my;
}

Nach dem Login kopieren

Änderung der Artikelnummer

Standard: Die eingefügte Projektnummer ist numerisch, 1,2,3. . . Automatisches Inkrementieren, Sie können der Projektnummer auch Text und Stil hinzufügen. Verwenden Sie weiterhin die obige HTML- und CSS-Änderung wie folgt:

h1:before{
    content:&#39;第&#39;counter(my)&#39;章&#39;;
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Nach dem Login kopieren

Geben Sie den Nummerntyp an

Verwenden Sie den Inhalt (Zählername). , Nummerntyp) Die Syntax des Formats gibt den Nummerierungstyp an. Der Verweis auf den Nummerierungstyp kann auf dem Attributwert list-style-type von ul basieren. Unter Verwendung des obigen HTML wird das CSS wie folgt geändert:

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Nach dem Login kopieren

Zahlenverschachtelung

Große Zahlen werden in mittleren Zahlen verschachtelt und mittlere Zahlen werden in kleinen Zahlen verschachtelt.

#html
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

#css
h1::before{
    content:counter(h)&#39;.&#39;;
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)&#39;.&#39;;
    margin-left:40px;
}
p{
    counter-increment:p;
}

Nach dem Login kopieren

In der Ausgabe des Beispiels ist zu erkennen, dass die Zahlen von p fortlaufend sind. Wenn Sie die drei Ps nach jedem H1 neu nummerieren, können Sie das CSS des obigen H1 mit dem Counter-Reset-Attribut zurücksetzen:

h1{    
    counter-increment:h;    
    counter-reset:p;
}

Nach dem Login kopieren

, um eine komplexere Verschachtelung zu erreichen, z. B. drei Ebenen. Verschachtelt.

#html
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

#css
h1::before{
    content:counter(h1)&#39;.&#39;;
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) &#39;-&#39; counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

Nach dem Login kopieren

Die vollständige DEMO finden Sie unten

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS content</title>
<style>
.string p:after {
    margin-left: -16px;
    background: #fff;
    content: "支持";
    color: #f00;
}

.attr p:after {
    content: attr(title);
}

.url p:before {
    content: url(https://img.php.cn/upload/article/000/000/009/587d87ecca52d563.jpg);
    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>

Nach dem Login kopieren