의사 요소와 의사 클래스의 기능과 차이점은 무엇입니까?

의사 요소와 의사 클래스는 CSS의 두 가지 중요한 개념이며 웹 디자인에서 매우 중요한 역할을 합니다. 이 기사에서는 의사 요소와 의사 클래스의 차이점과 기능을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 의사 요소
의사 요소는 문서에서 요소를 가상으로 만드는 방법입니다. 의사 요소는 이중 콜론(::)으로 표시됩니다. 일반적인 의사 요소에는 다음이 포함됩니다.

1. ::before 의사 요소:
   ::before 의사 요소는 선택한 요소 앞에 가상 요소를 만드는 데 사용됩니다. 의사 요소의 내용은 content 속성을 통해 설정할 수 있습니다.

샘플 코드:

<style>
    p::before {
        content: "前方的虚拟元素";
        color: red;
    }
</style>
<p>这是正常的段落。</p>

위 코드를 사용하면 단락 요소 앞에 빨간색 텍스트 "앞에 더미 요소"가 삽입됩니다.

2. ::after 의사 요소:
   ::after 의사 요소는 선택한 요소 뒤에 가상 요소를 만드는 데 사용됩니다. 또한 content 속성을 사용하여 의사 요소의 콘텐츠를 설정할 수도 있습니다.

샘플 코드:

<style>
    p::after {
        content: "后方的虚拟元素";
        color: blue;
    }
</style>
<p>这是正常的段落。</p>

위 코드를 사용하면 파란색 텍스트 "뒤에 있는 더미 요소"가 단락 요소 뒤에 삽입됩니다.

2. Pseudo-class
Pseudo-class는 특정 요소의 변경된 상태를 선택하거나 특정 위치의 요소를 선택하는 데 사용됩니다. 의사 클래스는 단일 콜론(:)으로 표시됩니다. 일반적인 의사 클래스에는 다음이 포함됩니다.

1. :hover 의사 클래스:
   :hover 의사 클래스는 마우스가 요소 위에 있을 때 상태를 선택하는 데 사용됩니다. .

샘플 코드:

<style>
    a:hover {
        color: red;
    }
</style>
<a href="#">鼠标悬停时变为红色</a>

위 코드는 링크 위에 마우스를 올리면 글꼴 색상이 빨간색으로 설정됩니다.

2. :active pseudo-class:
   :active pseudo-class는 요소가 활성화되는 상태를 선택하는 데 사용됩니다. 일반적으로 요소에서 마우스를 눌렀지만 놓지 않은 경우입니다.

샘플 코드:

<style>
    button:active {
        background-color: blue;
    }
</style>
<button>按钮</button>

위 코드는 버튼을 눌렀지만 놓지 않았을 때 배경색을 파란색으로 설정합니다.

3. :nth-child 의사 클래스:
   :nth-child 의사 클래스는 요소의 지정된 하위 요소를 선택하는 데 사용됩니다.

샘플 코드:

<style>
    li:nth-child(2) {
        color: red;
    }
</style>
<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
</ul>

위 코드는 목록에서 두 번째 li 요소를 선택하고 텍스트 색상을 빨간색으로 설정합니다.

요약:
의사 요소와 의사 클래스는 CSS에서 중요한 역할을 합니다. 의사 요소는 선택한 요소 전후에 가상 요소를 만드는 데 사용되며, 의사 클래스는 특정 요소의 상태나 위치를 선택하는 데 사용됩니다. 의사 요소와 의사 클래스의 유연한 사용을 통해 웹 페이지의 스타일을 보다 풍부하고 세밀하게 제어할 수 있습니다.

위 내용은 의사 요소와 의사 클래스의 기능과 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!