Detaillierte Erläuterung der Beispiele für Inhaltsattribute in CSS3

In diesem Artikel wird hauptsächlich das Inhaltsattribut in CSS3 Verwendungsbeispiele vorgestellt, das das Grundwissen für den Einstieg in CSS3 darstellt. Freunde, die es benötigen, können darauf zurückgreifen

Es gibt vier Haupt-Pseudoelemente in CSS: before/after/first-letter/first-line Im Vorher/Nachher-Pseudo--Elementselektor gibt es einen Inhalt Attribut, Kann Inhalte in die Seite einfügen.
Einfachen Text einfügen

Inhalt: „Artikel einfügen“ oder content:none fügt keinen Inhalt ein
html:

XML/HTML CodeInhalt in die Zwischenablage kopieren

1. <h1 >Das ist h1h1>

2. < 🎜>h2>Das ist h2h2>

CSS

CSS-CodeInhalt in die Zwischenablage kopieren

h1::after{   
    content:"h1后插入内容"
}   
h2::after{   
    content:none
}

Ergebnis ausführen:

jsfiddle net/. dwqs/Lmm1r08x/

Eingebettete Textsymbole

können den Attributwert für offene Anführungszeichen und den Attributwert für geschlossene Anführungszeichen des Inhaltsattributs auf beiden Seiten der

Zeichenfolge< verwenden 🎜> Fügen Sie verschachtelte Literalsymbole 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:

CSS-Code

Kopieren Sie den Inhalt in die Zwischenablage

Ergebnis ausführen:

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;   
}

jsfiddle.net/ dwqs /p8e3qvv4/

Bild einfügenInhaltsattribut kann auch Bilder direkt vor/nach dem Element einfügen

html:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <

   h3 >Das ist h3h3>

css:

Laufendes Ergebnis:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

jsfiddle.net/dwqs/c6qk6pkv/

Fügen Sie den Attributwert des Elements ein
Das Inhaltsattribut kann direkt mit attr abgerufen werden das Attribut des Elements.

html:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <

   a href="http:///www.ido321.com">Dies ist der Link < ;/a>

css:

CSS-Code

Inhalt in die Zwischenablage kopieren

Ergebnis ausführen:

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

jsfiddle.net/dwqs/m220nzan/

Projektnummer einfügen
Verwenden das Zählerattribut des Inhalts, um fortlaufende Nummern an mehrere Elemente anzuhängen.

html:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <

   h1>Großer Titelh1>

2. <

   p>Textp>

3. <

   h1>Großer Titelh1>

4. <

   p>Textp>

5. <h1>大标题h1>

6. <p>文字p>

7. <h1>大标题h1>

8. <p>文字p>

css:

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my)'.';   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

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

运行结果：
jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

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

运行结果：
jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题h1>

2. <p>文字1p>

3. <p>文字2p>

4. <p>文字3p>

5. <h1>大标题h1>

6. <p>文字1p>

7. <p>文字2p>

8. <p>文字3p>

9. <h1>大标题h1>

10. <p>文字1p>

11. <p>文字2p>

12. <p>文字3p>

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h)'.';   
}   
h1{   
    countercounter-increment:h;   
}   
p::before{   
    content:counter(p)'.';   
    margin-left:40px;   
}   
p{   
    countercounter-increment:p;   
}

运行结果：
jsfiddle.net/dwqs/2k5qbz51/

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

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

这样，编号就重置了，看看结果：
jsfiddle.net/dwqs/hfutu4Lq/

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题h1>

2. <h2>中标题h2>

3. <h3>小标题h3>

4. <h3>小标题h3>

5. <h2>中标题h2>

6. <h3>小标题h3>

7. <h3>小标题h3>

8. <h1>大标题h1>

9. <h2>中标题h2>

10. <h3>小标题h3>

11. <h3>小标题h3>

12. <h2>中标题h2>

13. <h3>小标题h3>

14. <h3>小标题h3>

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h1)'.';   
}   
h1{   
    countercounter-increment:h1;   
    countercounter-reset:h2;   
}   
h2::before{   
    content:counter(h1) '-' counter(h2);   
}   
h2{   
    countercounter-increment:h2;   
    countercounter-reset:h3;   
    margin-left:40px;   
}   
h3::before{   
    content:counter(h1) '-' counter(h2) '-' counter(h3);   
}   
h3{   
    countercounter-increment:h3;   
    margin-left:80px;   
}

运行结果：
jsfiddle.net/dwqs/wuuckquy/

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für Inhaltsattribute in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!