찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3의 콘텐츠 속성 예에 대한 자세한 설명

CSS3의 콘텐츠 속성 예에 대한 자세한 설명

Y2J
Y2J원래의
2017-05-24 10:17:121919검색

이 글에서는 CSS3 사용예제의 콘텐츠 속성을 ​​주로 소개하는데, CSS3를 시작하기 위한 기본 지식이 필요한 친구들은 참고하면 됩니다

CSS에는 네 가지 주요 의사 요소가 있습니다: before/after/first-letter/first-line. before/after 의사 요소 선택기 에는 콘텐츠가 있습니다. 속성, 페이지에 콘텐츠를 삽입할 수 있습니다.
일반 텍스트 삽입

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

XML/HTML 코드클립보드에 콘텐츠 복사

  1. 5fb96776336961f83ca7afc8b0a35075여기는 h1f210372c68b5a1bd7da0bac930c9784e

  2. 34b00ca9905c018780b4421e4845bc0ah2입니다5217e6c19cd15a48ecca986231fc7576

css

CSS 코드클립보드에 콘텐츠 복사

h1::after{   
    content:"h1后插入内容"
}   
h2::after{   
    content:none
}

실행 결과:

jsfiddle.net/ dwqs/ Lmm1r08x/

삽입된 텍스트 기호

콘텐츠 속성의 여는 따옴표 속성 값과 닫는 따옴표 속성 값을 사용하여 string

대괄호, 작은따옴표, 큰따옴표 등 중첩된 텍스트 기호입니다. 여는 따옴표는 시작 텍스트 기호를 추가하는 데 사용되고 닫는 따옴표는 끝 텍스트 기호를 추가하는 데 사용됩니다. 위 CSS 수정:

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;   
}
실행 결과:

jsfiddle.net/dwqs/ p8e3qvv4 /


Insert
picturecontent 속성은 요소 앞/뒤에 직접 그림을 삽입할 수도 있습니다

html:


XML/HTML 코드

클립보드에 콘텐츠 복사

  1. 88bc97aa53b67c5ba48a7ddfee19e08e h3입니다9577138373b352ecf52a2980f93396f9
    2. css:
h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

실행 결과:

jsfiddle.net/dwqs/c6qk6pkv/


요소의 속성 값을 삽입
콘텐츠 속성은 attr을 직접 사용하여 요소의 속성을 얻을 수 있습니다. 요소를 찾아서 해당 위치에 삽입합니다.

html:


XML/HTML 코드

클립보드에 콘텐츠 복사

  1. 0c71d08fbbd5b3d618589e3c5d333e40링크입니다< ;/a>
    2. css:

CSS 코드

클립보드에 콘텐츠 복사

a:after{   
    content:attr(href);   
}
실행 결과:

jsfiddle.net/dwqs/m220nzan/


프로젝트 번호 삽입
콘텐츠 사용 counter 속성은 여러 항목에 연속된 숫자를 추가합니다.

html:


XML/HTML 코드

콘텐츠를 클립보드에 복사

  1. e4a1999483d88b5c646097ef0be6cd67큰 제목d96b47279ad65ca3c8a78e46603f1cd7텍스트598f0cc40b4f7fb18e7015fb2fd721a7
  2. e4a1999483d88b5c646097ef0be6cd67큰 제목600b9b713fbbd7ceb46c37d1b1caab1a
  3. c623a45add6103fe7e3baf1116277278텍스트f48a0a2022cfb01ff30107bc9ebba736

  4. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  5. b1ba0ffe9712bc7808becc51b4a10ebd文字a7447e9e15348813b597b50fafc8734e

  6. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  7. b1ba0ffe9712bc7808becc51b4a10ebd文字a7447e9e15348813b597b50fafc8734e

css:

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my)&#39;.&#39;;   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

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

运行结果：
jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

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

运行结果：
jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

  1. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  2. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

  3. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

  4. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

  5. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  6. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

  7. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

  8. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

  9. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  10. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

  11. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

  12. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h)&#39;.&#39;;   
}   
h1{   
    countercounter-increment:h;   
}   
p::before{   
    content:counter(p)&#39;.&#39;;   
    margin-left:40px;   
}   
p{   
    countercounter-increment:p;   
}

运行结果：
jsfiddle.net/dwqs/2k5qbz51/

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

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

这样，编号就重置了，看看结果：
jsfiddle.net/dwqs/hfutu4Lq/

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

  1. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  2. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

  3. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  4. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  5. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

  6. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  7. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  8. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

  9. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

  10. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  11. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  12. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

  13. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

  14. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h1)&#39;.&#39;;   
}   
h1{   
    countercounter-increment:h1;   
    countercounter-reset:h2;   
}   
h2::before{   
    content:counter(h1) &#39;-&#39; counter(h2);   
}   
h2{   
    countercounter-increment:h2;   
    countercounter-reset:h3;   
    margin-left:40px;   
}   
h3::before{   
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);   
}   
h3{   
    countercounter-increment:h3;   
    margin-left:80px;   
}

运行结果：
jsfiddle.net/dwqs/wuuckquy/

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3를 사용하여 이미지 뒤집기 효과 만들기다음 기사：CSS3를 사용하여 이미지 뒤집기 효과 만들기

관련 기사

더보기