CSS 의사 요소

CSS 의사 요소는 선택기에 특수 효과를 추가하는 데 사용됩니다.

구문

의사 요소 구문:

selector:pseudo-element {property:value;}

CSS 클래스도 의사 요소를 사용할 수 있습니다.

selector.class:pseudo-element {property:value;}

:첫 번째 줄 의사 요소

"첫 번째 줄" 의사 요소는 추가하는 데 사용됩니다. 텍스트의 첫 번째 줄까지 특별한 스타일을 설정하세요.

참고: "첫 번째 줄" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.

참고: "첫 번째 줄" 의사 요소에는 다음 속성을 적용할 수 있습니다.

글꼴 속성

색상 속성

배경 속성

단어 간격

문자 간격

텍스트 장식

세로 정렬

텍스트 변환

line-height

clear

:first-letter 의사 요소

"first-letter" 의사 요소는 특수 스타일을 설정하는 데 사용됩니다. 텍스트의 첫 글자

참고: "첫 글자" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.

참고: "첫 글자" 의사 요소에는 다음 속성을 적용할 수 있습니다.

글꼴 속성

색상 속성

배경 속성

여백 속성

패딩 속성

테두리 속성

text-design

vertical-align("float"가 "none인 경우에만 해당) ")

텍스트 변환

줄 높이

float

clear

의사 요소 및 CSS 클래스

의사 요소는 CSS 클래스와 결합될 수 있습니다.

p.article:first-letter {color:#ff0000;}

< ;p class="article ">기사의 단락</p>

위의 예에서는 클래스 기사가 있는 모든 단락의 첫 글자가 빨간색으로 변합니다.

여러 의사 요소

는 여러 의사 요소와 조합하여 사용할 수 있습니다.

아래 예에서는 단락의 첫 글자가 빨간색으로 표시되고 글꼴 크기는 xx-large입니다. 첫 번째 줄의 나머지 텍스트는 파란색이며 작은 대문자로 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line 
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

CSS - :before 의사 요소

":before" 의사 요소는 요소의 콘텐츠 앞에 새 콘텐츠를 삽입할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>

CSS - :after 의사 요소

":after" 의사 요소는 요소의 콘텐츠 뒤에 새 콘텐츠를 삽입할 수 있습니다.

아아아아

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS ::before 伪元素示例</title> <style type="text/css" media="all"> div::before { background: lightgreen; content: "张三"; } </style> </head> <body> <div>今天来学习知识</div> </body> </html>

제출하다 코드 재설정

자동운전