CSS3의 콘텐츠 속성에 대한 자세한 소개

CSS에는 네 가지 주요 의사 요소가 있습니다: before/after/first-letter/first-line. before/after 의사- 요소 선택기 에는 콘텐츠 속성을 사용하여 페이지에 콘텐츠를 삽입할 수 있습니다.

일반 텍스트 삽입

콘텐츠: "삽입된 기사" 또는 콘텐츠:none은 콘텐츠를 삽입하지 않습니다.

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

실행 결과: https://jsfiddle.net/dwqs/ Lmm1r08x/

내장된 텍스트 기호

는 content 속성의 여는 따옴표 속성 값과 닫는 따옴표 속성 값을 사용하여 string 큰따옴표와 같은 중첩된 리터럴 기호입니다. 여는 따옴표는 시작 텍스트 기호를 추가하는 데 사용되고 닫는 따옴표는 끝 텍스트 기호를 추가하는 데 사용됩니다. 위 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;
}

실행 결과: https://jsfiddle.net/dwqs/p8e3qvv4/

이미지 삽입

콘텐츠 속성은 요소 앞/ 그림

#html
<h3 id="这是h">这是h3</h3>
#css
h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

삽입 후 작업 결과: https://jsfiddle.net/dwqs/c6qk6pkv/

요소의 속성값 삽입

content 속성은 attr을 직접 사용하여 요소 속성을 얻어 해당 위치에 삽입할 수 있습니다.

#html
<a>这是链接</a>
#css
a:after{
    content:attr(href);
}

실행 결과: https://jsfiddle.net/dwqs/m220nzan/

항목 번호 삽입

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

#html
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
#css
h1:before{
    content:counter(my)'.';
}
h1{
    counter-increment:my;
}

실행 결과: https://jsfiddle.net/dwqs/2ueLg3uj/

프로젝트 번호 수정

기본적으로 삽입된 프로젝트 번호는 숫자 1,2입니다. 3. . . 자동 증가, 프로젝트 번호에 텍스트와 스타일을 추가할 수도 있습니다. 여전히 위의 html을 사용하고 CSS 수정은 다음과 같습니다:

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

실행 결과: https://jsfiddle.net/dwqs/17hqznca/

넘버링 유형 지정

컨텐츠(카운터 이름, 넘버링 유형) 형식의 구문을 사용하여 넘버링 유형의 참조는

목록을 기반으로 할 수 있습니다. style-ul의 유형 속성 값입니다. 위 html을 사용하여 CSS를 다음과 같이 수정합니다.

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

실행 결과: https://jsfiddle.net/dwqs/4nsrtxup/

번호 중첩

큰 숫자 중첩 숫자는 중간 숫자 내에 중첩되고, 작은 숫자는 중간 숫자 내에 중첩됩니다.

#html
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
#css
h1::before{
    content:counter(h)'.';
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)'.';
    margin-left:40px;
}
p{
    counter-increment:p;
}

실행 결과: https://jsfiddle.net/dwqs/2k5qbz51/

예제의 출력에서 ​​볼 수 있듯이 p의 숫자가 연속됩니다. 각 h1 다음에 세 개의 p의 번호를 다시 지정하는 경우 counter-

reset 속성을 ​​사용하여 재설정하고 위 h1의 CSS를 수정할 수 있습니다.

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

이런 식으로 번호 매기기는 결과를 살펴보세요: https://jsfiddle.net/dwqs/hfutu4Lq/

3레벨 중첩과 같이 더 복잡한 중첩도 달성할 수 있습니다.

아아아아

위 내용은 CSS3의 콘텐츠 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!