CSS 의사 요소

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

구문

의사 요소 구문:

selector:pseudo-element {property:value;}

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

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

: 첫 번째 줄 의사 요소

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

다음 예에서 브라우저는 "첫 번째 줄" 의사 요소의 스타일에 따라 p 요소의 첫 번째 텍스트 줄 형식을 지정합니다.

          <!DOCTYPE html>
<html>
<head>
    <style>
        p:first-line
        {
            color:#ff0000;
            font-variant:small-caps;
        }
    </style>
</head>

<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

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

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

글꼴 속성
색상 속성
배경 속성
단어 간격
문자 간격
text -장식
vertical-align
text-transform
line-height
clear

: 첫 글자 의사 요소

"첫 글자" 의사 요소는 특별한 스타일을 설정하는 데 사용됩니다. 텍스트의 첫 글자:

예

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

프로그램을 실행하고 사용해 보세요

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

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

글꼴 속성
색상 속성
배경 속성
여백 속성
패딩 속성
테두리 속성
text- 장식
vertical-align ("float"가 "none"인 경우에만)
text-transform
line-height
float
clear

의사 요소 및 CSS 클래스

pseudo- 요소는 CSS 클래스와 결합될 수 있습니다. ：

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

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

The 위의 예는 모든 클래스를 기사 단락의 첫 글자가 빨간색으로 변하게 만듭니다.

다중 의사 요소

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

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

단락의 나머지 텍스트는 기본 글꼴 크기와 색상으로 표시됩니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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" 의사 요소는 요소의 콘텐츠 앞에 새 콘텐츠를 삽입할 수 있습니다.

다음 예에서는 각 <h1> 요소 앞에 이미지를 삽입합니다.

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

CSS - :after pseudo-element

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

다음 예제에서는 각 <h1> 요소 뒤에 이미지를 삽입합니다.

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1:after {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

모든 CSS 의사 클래스/요소

Selector	예	예제 설명
:link	a:link	방문하지 않은 링크 모두 선택
:visited	a:visited	방문한 링크 모두 선택
:active	a :활성	활성 링크를 선택하세요
:hover	a:hover	링크 위에 마우스를 올려주세요
:focus	input:focus	입력 후 포커스를 받을 요소를 선택하세요
: first-letter	p:first-letter	각 요소의 첫 글자 선택
:first-line	p:first-line	각 요소의 첫 글자 선택 한 줄
:first-child	p:first-child	선택기는 모든 요소의 첫 번째 하위인 <]p> 요소와 일치합니다.
:before	p: before	Insert 각 요소
:after	p:after	각 element
뒤에 콘텐츠 삽입:lang(언어)	p:lang (it)	시작을 선택하세요 요소