>  기사  >  웹 프론트엔드  >  CSS 고급 튜토리얼 의사 요소

CSS 고급 튜토리얼 의사 요소

黄舟
黄舟원래의
2016-12-14 16:46:381474검색

의사 요소는 selector:pseudoelement { property: value } 형식을 사용하여 의사 클래스와 같은 선택기를 빨아들입니다. 4개의 빨판이 있습니다.
첫 글자와 첫 줄
첫 글자 의사 요소는 요소의 첫 글자에 적용되며, 첫 줄 첫 줄은 요소의 맨 윗줄입니다. 예를 들어, 다음과 같이 굵은 첫 줄과 첫 문자 장식이 있는 단락을 만들 수 있습니다.
p:first-letter {
font-size: 3em; left; >p:first-line {
font-weight:bold;
}
전후
전후 의사 요소와 콘텐츠 속성은 변경하지 않고 요소의 양쪽에서 사용됩니다. HTML 양쪽의 내용을 모두 변경하는 경우.
content 속성의 값은 여는 따옴표(여는 따옴표), 닫는 따옴표(닫는 괄호), no-open-quote(여는 ​​괄호 없음), no-close-quote(닫는 괄호 없음)일 수 있습니다. 묶인 따옴표 문자열이나 이미지의 경우 url(이미지 이름)을 사용하세요.
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
참고
좋겠네요, 알겠어요? 글쎄요, 너무 많아서 (으, 한숨) 대부분의 사용자는 IE가 그것에 집착하기 때문에 전후 효과를 볼 수 없습니다. Lazy...

CSS 고급 튜토리얼 의사 요소에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트(
www.php.cn

)를 주목하세요!


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