CSS에서 의사 클래스와 의사 요소의 차이점은 무엇입니까? :before와 ::before의 차이점

이 글의 내용은 CSS에서 의사 클래스와 의사 요소의 차이점이 무엇인지 소개하는 것입니다. :before와 ::before의 차이점 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Pseudo-class는 DOM 트리 외부의 정보나 단순 선택기로 표현할 수 없는 정보를 선택하는 데 사용됩니다. 전자에는:visited와 같이 지정된 상태와 일치하는 요소가 포함되고,:active에는 다음과 같은 특정 논리적 조건을 충족하는 DOM 트리의 요소가 포함됩니다.: 첫 번째 자식,:첫 번째 유형, :대상.:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，:target。

（相当于一个特殊的class选择器，用来添加一些特殊效果）

伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。

（相当于一个特殊的元素（p、span），可以用来存放一些特殊样式或者内容）

在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::

(특수 클래스 선택기와 동일하며 일부 특수 효과를 추가하는 데 사용됨)

• 의사 요소는 DOM 트리에 정의되지 않은 가상 요소입니다. 다른 선택기와 달리 요소를 가장 작은 선택 단위로 사용하지 않고 요소의 지정된 내용을 선택합니다. 예를 들어,::before는 선택한 요소의 이전 콘텐츠를 나타냅니다. 즉,""는 선택한 요소의 콘텐츠를 나타냅니다. 선택한 요소. (특수 스타일이나 콘텐츠를 저장하는 데 사용할 수 있는 특수 요소(p,span)와 동일) CSS3에서는 의사 클래스와 의사 요소의 구문도 다릅니다. 의사 요소가 수정되었습니다.::로 시작합니다. 그러나 역사적인 이유로 인해 브라우저는:로 시작하는 의사 요소를 계속 지원하지만::로 시작하는 표준 형식으로 작성하는 것이 좋습니다. 의사급

# # 1 : hover # #:link # # 1 # # 상위 요소의 첫 번째 하위 요소인 요소 선택 :lang 지정된 lang 속성이 있는 요소 선택 2 활성화된 각 요소 선택 3 # # 3 # #:최초 유형 # # # # # #마지막 하위 요소인 요소 선택 특정 유형의 상위 요소 only-of-type :n번째 유형(n) # # :nth-last-of-type(n)

Selector	의미	CSS
:active	활성화되고 있는 요소를 선택하세요# #
# #마우스에 의해 정지된 요소 선택	1
방문하지 않은 요소 선택	1	:visited
방문한 요소 선택# #		:첫째 아이
2	# #
2# #	:focus	키보드 입력 포커스가 있는 요소 선택# ## #
	:활성화# #
# #: 비활성화	비활성화된 각 요소 선택	3# #
:선택됨	선택한 각 요소 선택	3
:target	현재 앵커 요소 선택# #
특정 유형의 상위 요소의 첫 번째 하위 요소인 요소 선택	3# #	:last-of-type
상위 요소의 특정 유형의 유일한 하위 요소인 요소 선택	3
상위 요소의 특정 유형의 n번째 하위 요소인 요소 선택	3
선택 만족은 특정 유형의 n번째 요소입니다 마지막 요소부터 상위 요소까지	3
:only-child	상위 요소의 유일한 하위 요소인 요소를 선택합니다.	3
:last-child	다음에 있는 요소를 선택합니다. 해당 부모 요소의 마지막 요소	3
:nth-child(n)	해당 부모 요소의 n번째 하위 요소인 요소를 선택합니다.	3
:nth-last-child(n)	상위 요소의 끝에서 두 번째 n번째 하위 요소임을 만족하는 요소를 선택하세요	3
:empty	아무것도 만족하지 않는 선택	3
:in-range	값이 지정된 범위 내에 있는 요소를 선택하세요	3
:범위를 벗어남	값이 지정된 범위 내에 있지 않은 요소를 선택하세요.	3
:invalid	값이 있는 요소를 선택하세요. 유효하지 않습니다	3
:valid	유효한 값을 만족하는 요소를 선택하세요	3
:not(selector)	다음과 같은 요소를 선택하세요. 선택기를 만족하지 않음	3
:선택 사항	선택적인 양식 요소를 선택하세요. 즉, "필수" 속성이 없습니다.	3
: 읽기 전용	"읽기 전용"이 있는 양식 요소 선택	3
:read-write	"읽기 전용"이 없는 양식 요소 선택	3
:root	루트 요소 선택	3

• Pseudo-element

  두 가지 작성 방법은 동일하며 둘 다 의사 요소를 나타냅니다.

  Selector	Meaning	CSS
  ::first-letter	지정된 요소 선택 한마디	1
  ::first-line	지정된 요소의 첫 번째 줄을 선택하세요	1
  ::after	지정된 요소의 내용 앞에 내용을 삽입	2
  ::before	지정된 요소의 콘텐츠 뒤에 콘텐츠를 삽입합니다. 사용자가 선택한 요소를 선택하세요. 지정된 요소 콘텐츠	3
  	:before와 ::before

:before는 CSS2로 작성되었고, ::before는 CSS3로 작성되었습니다.

1. :before는 ::before보다 호환성이 더 좋지만 H5 개발에서는 ::before를 사용하는 것이 좋습니다. 함께 사용됩니다.

2. 의사 요소는 DOM에 나타나지 않으므로 DOM에 표시될 수 없습니다. CSS 렌더링 레이어에

3. 을 추가하면 됩니다. 의사 요소의 특수 효과는 일반적으로 Activate

   .test:hover::before { /* 这时animation和transition才生效 */ }

   로그인 후 복사

을 사용합니다. www.cnblogs.com/ammyben/p/8012747.html

https://blog.csdn.net/yangxiaoyanger/article/details/79712180

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