ホームページ > 記事 > ウェブフロントエンド > セレクターを使用して必要なコンテンツを CSS3 のページに挿入する方法 (コードは添付されています)

セレクターを使用して必要なコンテンツを CSS3 のページに挿入する方法 (コードは添付されています)

不言オリジナル: 2018-08-24 10:27:082006ブラウズ

この記事の内容は、CSS3 セレクターを使用して必要なコンテンツをページに挿入する方法についてです。必要な友人が参考になれば幸いです。

1 セレクターを使用してコンテンツを挿入します

after または before セレクターを使用して、セレクターの content 属性に挿入するコンテンツを定義します。挿入されたコンテンツがテキストの場合は、一重引用符または二重引用符を追加する必要があります。

<style type="text/css">
h2:before{  content：‘COLUMN’；}
</style>

2 挿入しない要素を個別に指定

content属性のnone属性値を使用

<style type="text/css">
h2.sample:before{  content：none；}
</style>

3 画像ファイルを挿入

<style type="text/css">
h2:before{  content：url(mark.png)；}
</style>

4 alt属性の値をタイトルとして表示画像

の content 属性に「attr(属性名)」を指定することで、特定の属性の属性値を表示することができます。

img:after{
content:attr(alt);
display:block;
text-align:center;
}

5 content 属性を使用して項目番号を挿入します

(1) 複数のタイトルの前に連続した番号を追加します

1. content 属性の counter 属性値を使用して、複数の項目に連続した番号を追加します

< ;要素> ;: before{ content: counter (カウンター名); } (カウンターを使用して数値を計算します。カウンターの名前は任意に指定できます)

2. 要素の counter-increment 属性の指定も追加する必要があります。要素のスタイル連続番号付けを使用するには、counter-increment 属性の属性値を、before セレクターまたは after セレクターの counter 属性値で指定されたカウンター名に設定する必要があります。

174044f44930a23068da119ebb1ad27e{ counter-increment: beforeセレクターまたはafterセレクターで指定したカウンター名}

h1：before｛content：counter（mycounter）；｝
h1｛counter-increment：mycounter；｝//1、2、3.......

(2) 項目番号にテキストを追加

h1：before｛content：‘第’counter（mycounter）‘章’；｝//第1章大标题、第2章大标题.........

(3) 数値の種類を指定

1 。 before セレクターまたは after セレクターの content 属性を使用すると、数値だけでなく、アルファベットやローマ数字を追加することもできます。

content: counter (カウンター名、番号付けタイプ)

2. list-style-type 属性の値を使用して、番号付けのタイプを指定できます。たとえば、大文字で番号付けする場合は、「upper-」を使用します。大文字のローマ字を指定するには、「alpha」属性を使用します。「upper-roman」属性を使用します。

h1：before｛content：counter（mycounter，upper-alpha）‘.’；｝// A.、B.、C.、

(4) 数値のネスト

h1：before｛content：counter（mycounter）；｝//1（1、2、3...）、2（1、2、3...）、........
h1｛counter-increment：mycounter；counter-reset:subcounter;｝(将中编号进行重置)
h2：before｛content：counter（subcounter）；｝
h2｛counter-increment：subcounter；margin-left:40px｝

(5) 中程度の数値の中に大きな数値を埋め込む

h2：before｛content：counter（mycounter）‘-’ counter（subcounter）‘.’；｝//1-1、1-2

(6) 文字列の両側にネストされたテキスト記号を追加する

1 の open-quote 属性値を使用できます。 content 属性 close-quote 属性値を使用して、文字列の両側に括弧、一重引用符、二重引用符などのネストされたテキスト記号を追加します。

2. open-quote 属性値はネストされたテキストシンボルの先頭を追加するために使用され、close-quote 属性値はネストされたテキストシンボルの末尾を追加するために使用されます。

3. 要素のスタイルで引用符属性を使用して、使用するネストされたテキストシンボルを指定します

h1:before{  content:open-quote; }
h1:after { content:close-quote; }
h1{   quotes:"(" ")"   }//形如:   （标题）