집 > 기사 > 웹 프론트엔드 > 선택기를 사용하여 CSS3의 페이지에 필요한 콘텐츠를 삽입하는 방법(코드 첨부)

선택기를 사용하여 CSS3의 페이지에 필요한 콘텐츠를 삽입하는 방법(코드 첨부)

不言원래의: 2018-08-24 10:27:081961검색

이 글의 내용은 CSS3 선택자를 사용하여 페이지에 필요한 내용을 삽입하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1 선택기를 사용하여 내용을 삽입하세요

선택기의 내용 속성에 삽입할 내용을 정의하고, 삽입할 내용이 텍스트인 경우 작은따옴표나 큰따옴표를 추가해야 합니다.

<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 속성 값을 제목으로 표시 image

content 속성에 "attr(속성명)"을 지정하면 특정 속성의 속성값을 표시할 수 있습니다.

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

5 콘텐츠 속성을 사용하여 항목 번호 삽입

(1) 여러 제목 앞에 연속 번호 추가

1 여러 항목에 연속 번호를 추가하려면 콘텐츠 속성의 카운터 속성 값을 사용하세요.

< ;Element> ;: before{ content: counter (counter name); } (카운터를 사용하여 숫자를 계산할 수 있으며, 카운터 이름은 임의로 지정할 수 있습니다.)

2 또한 요소의 counter-increment 속성에 대한 사양을 추가해야 합니다. 요소의 스타일을 연속적으로 사용하려면 counter-increment 속성의 속성값을 before 선택자나 after 선택자의 카운터 속성값에 지정된 카운터 이름으로 설정해야 합니다.

558dc77cf99fee6757323747f07fa144{ 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: 카운터(카운터 이름, 번호 매기기 유형)

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. content 속성 문자열 양쪽에 대괄호, 작은따옴표, 큰따옴표 등 중첩된 텍스트 기호를 추가하려면 닫기-따옴표 속성 값을 사용합니다.

2. open-quote 속성 값은 중첩된 텍스트 기호의 시작 부분을 추가하는 데 사용되고, close-quote 속성 값은 중첩된 텍스트 기호의 끝 부분을 추가하는 데 사용됩니다.

3. 사용할 중첩 텍스트 기호를 지정하려면 요소 스타일에 따옴표 속성을 사용하세요.

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