ホームページ > 記事 > ウェブフロントエンド > CSS3コンテンツ属性の実装手順

CSS3コンテンツ属性の実装手順

php中世界最好的语言オリジナル: 2017-12-01 10:01:492009ブラウズ

:before"、":after" 疑似クラスが CSS3 に登場したことはわかっているので、今日は CSS3 の content 属性を実装する手順を説明します。以下はケースです。見てみましょう。

css3 の ":before"、":after" 疑似クラスで使用されます。

次のように記述できます。

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

これら 2 つのセレクターの機能と効果については、ここでは紹介しません。主に、前述の css 属性の内容 :after および :before 擬似要素とともに使用して、オブジェクトの前後にコンテンツを表示します。

normal: none と同じように動作します。

none: 値を生成しません。 attr>: タグ属性値を挿入します9bb6a7d109b3f2bf35f7e2e9bd87f98a: 指定された絶対アドレスまたは相対アドレスを使用して、外部リソース (画像、音声、ビデオ、またはブラウザーでサポートされているその他のリソース) を挿入します98c455a79ddfebb79781bff588e7b37e: 文字列を挿入します

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 属性の post タグを挿入しません。ネストレベル

no-open-quote: quotes 属性のフロントタグを挿入しませんが、ネストレベルを下げます

close-quote: quotes 属性のポストタグを挿入します

open-quote: フロントタグを挿入します。属性の

ここで理解するのが難しい値は次のとおりです: counter(name);

以下は主にこのセクションを要約し、最後に各値のデモを示します。

たとえば、次の html があります。構造:

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

各 li の後に現在の li インデックス値を追加したい:

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

説明:

count(name) ここでの名前は事前に指定する必要があり、それ以外の場合はすべての値が 0 になります。

count(name,list-style-type) ここで list-style-type は CSS の list-style-type 属性の値です

完全なデモを以下に示します

<!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 中国語 Web サイトの他の関連記事に注目してください。