이것은 h1입니다
CSS에는 네 가지 주요 의사 요소가 있습니다: before/after/first-letter/first-line. before/after 의사- 요소 선택기 에는 콘텐츠 속성을 사용하여 페이지에 콘텐츠를 삽입할 수 있습니다.
콘텐츠: "삽입된 기사" 또는 콘텐츠:none은 콘텐츠를 삽입하지 않습니다.
#html <h1>这是h1</h1> <h2>这是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>这是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 href="http:///www.ido321.com">这是链接</a> #css a:after{ content:attr(href); }실행 결과: https://jsfiddle.net/dwqs/m220nzan/항목 번호 삽입여러 항목에 연속 번호를 추가하려면 콘텐츠의 카운터 속성을 사용하세요. .
#html <h1>大标题</h1> <p>文字</p> <h1>大标题</h1> <p>文字</p> <h1>大标题</h1> <p>文字</p> <h1>大标题</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>大标题</h1> <p>文字1</p> <p>文字2</p> <p>文字3</p> <h1>大标题</h1> <p>文字1</p> <p>文字2</p> <p>文字3</p> <h1>大标题</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!