CSS의 의사 요소는 무엇입니까?

CSS의 의사 요소는 요소의 특정 부분을 스타일링하거나 추가 HTML없이 가상 콘텐츠를 추가하는 데 사용됩니다. 1. 그들은 두 개의 콜론으로 시작합니다 (: :)와 다음과 같은 키워드가 이어집니다. 2. 요소 상태를 대상으로하는 의사 클래스와 달리 의사 요소는 요소의 일부를 대상으로합니다. 3. 예를 들어, p :: 일차 스타일은 단락의 첫 번째 줄만 있습니다. 4. Pseudo-Elements 이후의 :: 이전 및 :: 이후에 컨텐츠 속성이 요소의 실제 컨텐츠 전후에 가상 컨텐츠를 표시하도록 요구합니다. 5. 의사 요소는 색상, 패딩 및 위치와 같은 특성을 가진 일반 요소와 같이 스타일을 지정할 수 있습니다. 6. 장식적인 터치, 타이포그래피 향상, 툴팁 및 형태 스타일에 유용하지만 중요한 또는 동적 콘텐츠 또는 정확한 레이아웃 제어에는 사용해서는 안됩니다.

CSS의 의사 요소는 추가 HTML이 필요없이 요소의 특정 부분을 스타일링하는 데 사용됩니다. 그들은 첫 번째 글자, 텍스트 줄 또는 ::before 아직 존재하지 않는 콘텐츠와 같은 것들과 ::after 것을 대상으로합니다.

pseudo elements는 정확히 무엇입니까?

의사 요소는 두 개의 콜론 ( :: ::first-line ::before ::after :hover 가 :nth-child 됩니다.

예를 들어:

 P :: 첫 번째 라인 {
  글꼴 중량 : 대담한;
}

이것은 모든 단락의 첫 번째 줄만 대담하게 만듭니다. 실제 HTML 요소를 선택하는 것이 아닙니다. 브라우저가 자동으로 생성하는 스타일의 일부입니다.

일반적으로 사용되는 의사 요소

다음은 볼 수있는 가장 유용한 것 중 일부입니다.

• ::before - 요소의 실제 컨텐츠 전에 컨텐츠를 삽입합니다.
• ::after - 요소의 내용 후에 컨텐츠를 삽입합니다.
• ::first-line -블록의 첫 번째 텍스트 라인 스타일.
• ::first-letter -텍스트 블록의 첫 번째 글자 스타일.
• ::selection - 사용자가 강조한 텍스트의 일부 스타일.

이것들은 작은 디자인 터치에 실제로 유용하거나 추가 마크 업없이 시각적 신호를 추가 할 수 있습니다.

사용 방법 :: 이전 및 :: 이후

이 두 사람은 아마도 가장 널리 사용될 것입니다. content 속성을 사용해야합니다.

예:

 .Button :: 후 {
  내용 : "→";
}

이것은 클래스의 요소에 오른쪽 화살표가 추가됩니다 .button 플로트를 지우거나 아이콘을 추가하는 것과 같은 레이아웃 트릭에 사용할 수도 있습니다.

이것을 사용할 때 몇 가지 메모 :

• content 가 없으면 의사 요소가 나타나지 않습니다.
• 색상, 포지셔닝, 패딩 등의 일반적인 요소처럼 스타일링 할 수 있습니다.
• 중요한 콘텐츠에 대해 과도하게 사용하지 않도록주의하십시오.

언제 사용해야합니까?

그들은 훌륭합니다 :

• 추가 HTML없이 장식 요소 추가.
• 타이포그래피 향상 ( ::first-letter 와 같은 드롭 캡과 같은).
• 툴팁 또는 미묘한 UI 힌트 생성.
• 스타일링 요소 또는 선택.

그러나 사용하지 마십시오.

• 액세스 가능하거나 검색 할 수있는 모든 것.
• 동적으로 변경 될 수있는 콘텐츠 - JavaScript를 통해 content 쉽게 업데이트 할 수 없습니다.
• 정확한 제어가 필요한 레이아웃 구조 (실제 요소를 사용하는 것이 좋습니다).

대부분의 경우 의사 요소는 코드를 깨끗하게 유지하고 불필요한 마크 업을 줄이는 데 도움이됩니다. 일단 당신이 그들을 매달린 후에는 간단하지만 조심하지 않으면 오용하기 쉽습니다.

위 내용은 CSS의 의사 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!