CSS 의사 요소
CSS 의사 요소는 선택기에 몇 가지 특수 효과를 추가하는 데 사용됩니다.
구문
의사 요소 구문:
CSS 클래스는 의사 요소를 사용할 수도 있습니다:
: 첫 번째 줄 의사 요소
"첫 번째 줄" 의사 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 설정하는 데 사용됩니다.
다음 예에서 브라우저는 "첫 번째 줄" 의사 요소의 스타일에 따라 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 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) | 시작을 선택하세요 요소 |
