우리는 CSS3에 :before", ":after" 의사 클래스가 등장한 것을 알고 있으므로 오늘은 CSS3의 content 속성을 구현하는 단계를 알려드리겠습니다. 다음은 사례이므로 살펴보겠습니다.
css3 ":before", ":after" 의사 클래스에 나타납니다.
다음과 같이 작성할 수 있습니다.
h1:after{ content:'h1后插入的文本'; ...}
이 두 선택기의 기능과 효과는 여기서 소개하지 않습니다. 위에서 언급한 CSS 속성 콘텐츠 :after 및 :before 의사 요소와 함께 사용하여 객체 앞이나 뒤의 콘텐츠를 표시합니다.
content 값:
normal: none과 동일하게 동작합니다.
none: 값을 생성하지 않습니다. attr>: 태그 속성 값 삽입9bb6a7d109b3f2bf35f7e2e9bd87f98a: 지정된 절대 또는 상대 주소98c455a79ddfebb79781bff588e7b37e를 사용하여 외부 리소스(이미지, 오디오, 비디오 또는 브라우저에서 지원하는 기타 리소스)를 삽입합니다. 문자열
counter( name) 삽입: 명명된 카운터 사용
counter(name,list-style-type): 명명된 카운터를 사용하고 지정된 목록 스타일 유형 속성을 준수합니다.
counters(name, string): 모든 명명된 카운터 사용 명명된 카운터
counters(name, string, list-style-type): 명명된 모든 카운터를 사용하고 지정된 list-style-type 속성을 준수합니다.
no-close-quote: quote 속성의 post 태그를 삽입하지 않지만 증가합니다. 중첩 수준
no-open-quote: quote 속성의 앞 태그를 삽입하지 않지만 중첩 수준을 줄입니다.
close-quote: quote 속성의 뒤 태그를 삽입합니다.
open-quote: 앞 태그를 삽입합니다.
여기에서 이해하기 어려운 값은 다음과 같습니다: counter(name); 구조:
<ul> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li></ul>
각 li 뒤에 현재 li 인덱스 값을 추가하고 싶습니다.
ul li{ counter-increment:index; } ul li:after{ content:'统计:'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 중국어 웹사이트의 다른 관련 기사를 주목하세요! background-size 속성
을 사용하여 회전 후광 효과를 구현하는 단계
위 내용은 CSS3 콘텐츠 속성 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!