CSS 의사 클래스 및 의사 요소
1. 의사 클래스와 의사 요소
css는 의사 클래스와 의사 요소의 개념을 소개합니다. 문서 트리 외부의 형식 정보 즉, 의사 클래스와 의사 요소는 문장의 첫 글자나 목록의 첫 번째 요소 등 문서 트리에 없는 부분을 수정하는 데 사용됩니다. 의사 클래스와 의사 요소에 대한 설명은 다음과 같습니다.
의사 클래스 는 특정 상태에 있을 때 기존 요소에 해당 스타일을 추가하는 데 사용됩니다. 사용자 행동 및 동적 변화. 예를 들어, 사용자가 지정된 요소 위로 마우스를 가져가면 :hover를 사용하여 이 요소의 상태를 설명할 수 있습니다. 일반적인 CSS 클래스와 유사하며 기존 요소에 스타일을 추가할 수 있지만 DOM 트리에서 설명할 수 없는 상태의 요소에만 스타일을 추가할 수 있으므로 의사 클래스라고 합니다.
의사 요소는 문서 트리에 없는 요소를 만들고 스타일을 추가하는 데 사용됩니다. 예를 들어 :before를 사용하여 요소 앞에 텍스트를 추가하고 이 텍스트에 스타일을 추가할 수 있습니다. 텍스트는 사용자에게 표시되지만 실제로는 문서 트리에 없습니다.
2. 의사 클래스와 의사 요소의 차이점
두 가지의 차이점을 보여주는 두 가지 예는 다음과 같습니다.
다음은 간단한 HTML 목록 조각입니다.
<ul>
<li>내가 첫 번째입니다< ;/ li>
<li>저는 둘째입니다</li>
</ul>
원하시면 첫 번째 항목에 스타일을 추가하려면 첫 번째 <li>에 클래스를 추가하고 클래스에서 해당 스타일을 정의하면 됩니다.
HTML:
<ul> ;
<li class="first-item">내가 첫 번째입니다</li>
<li>내가 두 번째입니다</li>
</ul>
CSS:
li.first-item {색상: 주황색}
클래스를 추가할 필요가 없다면 첫 번째 <li>의 :first-child 의사 클래스를 설정하여 클래스에 스타일을 추가할 수 있습니다. 이때 수정된
HTML:
<ul>
<li>내가 첫 번째입니다</li>
< li>나는 두 번째입니다</li>
</ul>
CSS:
li:first-child {color: orange}
여기 또 다른 간단한 HTML 단락 조각이 있습니다:
<p>Hello World. 좋은 하루 되세요!</p>
단락의 첫 글자에 스타일을 추가하려면 첫 글자에 <span> 요소를 래핑하고 범위 요소의 스타일을 설정할 수 있습니다.
HTML:
<p><span class="first">안녕</span>안녕하세요 세상, 좋은 하루 보내세요!</p>
CSS:
.first {글꼴 크기: 5em;}
<span> 요소를 만들지 않으면 <p>의 :first-letter 의사 요소를 설정하여 스타일을 추가할 수 있습니다. 이때 가상의 <span> 요소가 생성되어 스타일이 추가된 것처럼 보이지만 실제로는 이 <span> 요소가 문서 트리에 존재하지 않습니다.
HTML:
<p>Hello World님, 좋은 하루 보내세요!</p>
CSS :
p:first-letter {font-size: 5em;}
위의 예에서 볼 수 있듯이 의사의 조작 객체는 -class는 문서입니다. 요소는 이미 트리에 존재하는 반면, 의사 요소는 문서 번호 외부에 요소를 생성합니다. 따라서 의사 클래스와 의사 요소의 차이점은 이 문서 트리 외부에 요소를 생성하는지 여부입니다.
의사 클래스와 의사 요소의 혼동의 근원
가장 헷갈리는 것은 아마도 대부분의 사람들이 :before, :after 등의 pseudo-element를 pseudo-class라고 부르는데, 개념이 헷갈리더라도 실제 사용에는 문제가 없습니다. 실제 사용 시에는 얼마나 문제가 발생할까요 :)
CSS3 사양 요구 사항 의사 요소를 나타내려면 이중 콜론(::)을 사용하세요 예를 들어 ::before 및 ::after와 같은 의사 요소는 이중 콜론(::)을 사용하고 :hover 및 :active와 같은 의사 클래스는 단일 콜론(:)을 사용합니다. IE8 미만의 일부 브라우저를 제외하고 대부분의 브라우저는 의사 요소의 이중 콜론(::) 표현 방법을 지원합니다.
의사 클래스 및 의사 요소의 사용
의사 클래스
1 :link 방문하지 않은 링크 선택
2 :visited 방문한 링크 선택
3 :hover 마우스 포인터가 떠 있는 요소 선택
4 : 활성 활성 링크 선택
5 :focus 포커스를 얻으려면 입력 필드를 선택하세요
:first - 하위 의사 클래스
은 요소의 첫 번째 하위 요소와 일치합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:first-child {
color: orange;
}
</style>
<body>
<ul>
<li>这里的文本是橙色的</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:not pseudo-class
매개변수를 일치시키는 데 사용되는 부정 의사 클래스입니다. 장치의 선택 요소와 일치하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:not(.first-item) {
color: orange;
}
</style>
<body>
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:lang pseudo-class
: lang은 특정 언어를 설정하는 요소와 일치합니다. HTML 요소의 경우 lang="" 속성을 설정하거나, 메타 요소의 charset="" 속성을 설정하거나, http 헤더에 언어 속성을 설정하세요.
의사요소
::before/:before 의사 요소
:before는 선택한 요소 앞에 콘텐츠를 삽입합니다. 삽입할 내용을 지정하려면 content 속성을 사용해야 합니다. 삽입되는 내용은 실제로 문서 트리에 없습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
<body>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
</body>
</html>::after/:after 의사 요소
:after는 요소 뒤에 콘텐츠를 삽입하며 사용법과 특성은 다음과 유사합니다. 전에 .
::첫 글자/:첫 글자 의사 요소
: first -letter는 요소에 있는 텍스트의 첫 글자와 일치합니다. 수정된 이니셜은 문서 트리에 없습니다.
::first-line/:first-line 의사 요소
:first-line은 요소의 텍스트 첫 번째 줄과 일치합니다. 이 의사 요소는 인라인 요소가 아닌 블록 요소 내에서만 사용할 수 있습니다.
아아아아
