CSS에서 ::before는 무엇을 의미하나요?

CSS의 "::before"는 "before..."를 의미합니다. 의사 요소를 생성하고 선택한 요소의 첫 번째 하위 요소로 설정하고 요소에 삽입하는 데 사용되는 의사 요소입니다. 다른 콘텐츠의 경우 구문은 "element::before{style code}"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 ::before는 무엇을 의미하나요?

Css에서 ::before는 생성된 콘텐츠 요소를 나타내고 해당 요소의 추상화 가능한 스타일의 첫 번째 하위 요소를 나타내는 의사 클래스 요소입니다. , 즉 : 선택한 요소의 첫 번째 하위 요소입니다.

요소의 다른 콘텐츠 앞에 삽입할 콘텐츠를 삽입하려면 ::before를 사용하고 기본적으로 인라인으로 표시합니다. ::before에는 콘텐츠 값을 지정하는 콘텐츠 속성이 필요합니다.

::befor 사용 시나리오(예: 요소 앞에 아이콘 추가)

<p class="test">
     2019/11/29 15:35:51
</p>//在这前面加一个小闹钟的图标就可使用::befor

.test::before
  {
   content: url(./1597910280\(1\).png);
 }

동일한 사항:

1. 객체 앞에 콘텐츠를 설정하는 데 사용되는 의사 클래스 객체

2 . ::before :before의 작성 방법은

와 동일합니다. 차이점:

:before는 Css2로 작성되고, ::before는 Css3

:before가 ::before보다 호환성이 좋지만 권장됩니다. H5 개발에 사용하려면 ::before가 더 좋습니다

설명:

1. 의사 클래스 요소는 콘텐츠 속성과 함께 사용해야 합니다

2. 의사 클래스 요소는 CSS 렌더링 레이어에 의해 추가될 수 없습니다. js를 통해 작동됩니다

3. 특수 효과는 일반적으로 다음을 통해 활성화됩니다. hover 의사 클래스 스타일

이건 좀 쓸데없는 것 같아요. 사용해도 되지만.

의사 요소와 의사 클래스의 차이점

• 의사 클래스

의사 클래스는 DOM 트리 외부의 정보나 간단한 선택기로 표현할 수 없는 정보를 선택하는 데 사용됩니다. 전자에는 :visited, :active와 같이 지정된 상태와 일치하는 요소가 포함되고, 후자에는 :first-child, :first-of-type, :target과 같은 특정 논리적 조건을 충족하는 DOM 트리의 요소가 포함됩니다. . CSS 의사 클래스는 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.

• Pseudo-elements

Pseudo-elements는 DOM 트리에 정의되지 않은 가상 요소입니다. 다른 선택기와 달리 요소를 가장 작은 선택 단위로 사용하지 않고 요소의 지정된 내용을 선택합니다. 예를 들어::before는 선택한 요소 이전의 내용을 의미합니다. 즉, ""는 선택한 요소의 선택한 내용을 의미합니다. CSS 의사 요소는 특정 선택기에 특수 효과를 설정하는 데 사용됩니다.                                                                   문법적 차이

  CSS3에서는 의사 클래스와 의사 요소도 문법적으로 다르며, 의사 요소는 시작하도록 수정됩니다.

와 함께.

3) 의사 클래스/의사 요소 목록::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::

:active활성화 중인 요소를 선택하세요1:hover마우스 요소로 가리키도록 선택 1:link방문하지 않은 요소 선택1:visited방문한 요소 선택1:first -아이 만족하도록 선택 상위 요소의 첫 번째 하위 요소2:lang지정된 lang 속성을 가진 요소 선택2:focus키보드 입력으로 요소 선택 focus1 선택한 요소 3:target현재 앵커 요소를 선택하세요3:: 첫 글자::first-line::after

select 요소의 첫 번째 단어를 지정합니다	1
지정된 요소의 첫 번째 줄을 선택합니다	1

내용 뒤에 내용을 삽입합니다. 지정된 요소

2

::before지정된 요소의 내용 앞에 내용을 삽입2::selection지정된 요소에서 사용자가 선택한 내용을 선택3

의사 클래스는 클래스와 동일한 우선순위를 가지며, 의사 요소는 태그와 동일한 우선순위를 가집니다. 그런데 우선순위를 판단하는 방법은 일반적으로 !important > Inline style > ID selector > Tag > Inheritance > 간단한 계산 방법도 있는데, 인라인 스타일시트의 가중치는 1000, ID 선택자의 가중치는 100, 클래스 선택자의 가중치는 10, HTML 태그 선택자의 가중치는 1, 가중치는 이다. 실제로는 10진수로 계산되지 않습니다. 숫자로 표현한 것은 단지 아이디어를 설명하기 위한 것입니다. 가중치가 클수록 이전의 가중치를 비교할 수 있습니다. 스타일은 최신 표지로 대체됩니다.

(학습 영상 공유: css 영상 튜토리얼)

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