의사 요소가 어린이라는 것을 조금 상기시켜줍니다.

의사 요소 : 이는 똑같지 않은 어린이 요소처럼 보입니다.

어린이 요소가 포함 된 컨테이너를 살펴 보겠습니다.

<div class="container">
  <div>목</div>
  <div>목</div>
  <div>목</div>
</div>

다음 스타일을 추가하면 :

 .Container :: 이전 {
  내용 : "x";
}

효과는 다음과 같습니다.

<div class="container">
  [[[:: pseudo element 이전]]]]]
  <div>목</div>
  <div>목</div>
  <div>목</div>
</div>

의사 원소의 행동은 대부분의 경우 아동 요소의 행동과 유사합니다. 그러나 중요한 차이점은 다른 선택기가이를 생성 ::before 선택기를 제외하고 직접 선택할 ::after 없다는 것입니다.

예를 들어, 컨테이너를 2x3 그리드로 설정하고 각 어린이 요소가 알약과 같은 디자인이라고 가정합니다.

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1fr 1fr;
  그리드 갭 : 0.5rem;
}

.Container> * {
  배경 : Darkgray;
  Border-Radius : 4px;
  패딩 : 0.5REM;
}

의사 요소가 없으면 그 효과는 예상대로됩니다. 그러나 의사 요소를 추가 한 후에는 그리드 레이아웃에 참여할 수 있으며 예상치 못한 일 수 있습니다. 의사 요소는 종종 장식 목적으로 사용되며 컨텐츠 레이아웃에 참여하는 것은 약간 이상하게 보입니다.

.container > * 선택기는 의사 요소를 어두운 회색으로 만들지 않습니다. 이런 식으로 의사 요소를 선택할 수 없기 때문입니다. 이것은 또 다른 작은 문제입니다.

매일 개발에서 의사 요소는 일반적으로 position: absolute :

 .Container :: 이전 {
  콘텐츠: "";
  위치 : 절대;
  /* 장식 스타일*/
}

이 경우 의사 요소의 존재를 전혀 알지 못할 수 있습니다. 여전히 기술적으로 DOM 구조에 참여하는 아동 요소이지만 그리드 레이아웃에는 참여하지 않습니다. 이것은 CSS 그리드에 고유 한 현상이 아닙니다. Flexbox에서 의사 요소도 Flex 프로젝트가됩니다. 플로팅 또는 기타 레이아웃 방법을 사용하는 것처럼 의사 요소를 제어 할 수 있습니다.

개발자 도구는 의사 요소가 DOM의 자식 요소와 유사하다는 것을 분명히 보여줍니다.

주목해야 할 다른 문제가 있습니다.

하나는 :nth-child() 선택기입니다. 의사 요소가 자식 요소라면 :nth-child() 과 같은 영향을 미칠 것이라고 생각할 수도 있습니다. 이것은 다음을 의미합니다.

 .Container> : nth-Child (2) {
  배경 : 빨간색;
}

::before 요소가 존재하는지 아닌지에 관계없이 동일한 요소가 선택됩니다. ::after :nth-last-child 셀렉터도 마찬가지입니다. 의사 요소가 아동 요소와 똑같은 경우 이러한 선택기에 영향을 미칩니다.

또 다른 문제는 정상적인 자식 요소를 선택하는 것처럼 JavaScript에서 의사 요소를 선택할 수 없다는 것입니다. document.querySelector(".container::before"); null 을 반환합니다. JavaScript에서 의사 요소 스타일에 액세스 해야하는 경우 CSSOM을 사용할 수 있습니다.

 const styles = window.getComputedStyle (
  document.querySelector ( '. 컨테이너'),
  '::전에'
);
Console.log (Styles.content); // "X"
console.log (styles.color); // rgb (255, 0, 0)
console.log (Styles.getPropertyValue ( 'color')); // rgb (255, 0, 0)

의사 요소와 관련된 다른 문제를 겪었습니까?

위 내용은 의사 요소가 어린이라는 것을 조금 상기시켜줍니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!