집 > 기사 > 웹 프론트엔드 > 클래스 이름 선택기가 CSS3에 새로운가요?

클래스 이름 선택기가 CSS3에 새로운가요?

클래스 이름 선택기는 CSS3에 새로운 것이 아닙니다. 구문은 ".class{css code;}"입니다. 클래스 이름 선택기는 CSS3 이전에 사용되었습니다. CSS3의 새로운 선택자는 속성 선택자, 구조적 의사 클래스 선택자 등을 포함합니다.

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

클래스 이름 선택기

클래스 선택기

클래스 속성을 사용하여 클래스 클래스를 호출하세요

예:

 <p class="one">类选择器</p>

 .one {
       color: yellow;
        }

여기서 p 태그 클래스 이름은 1이라고 하며 CSS는 스타일을 추가할 때 .+1을 사용합니다. 그가 선택한 것(그의 클래스 이름)이 클래스 선택자입니다.

확장 지식: css3 새로운 선택기

속성 선택기

구조적 의사 클래스 선택기

ul li:first-child {} (ul에서 첫 번째 자식 li 선택)
ul li :last-child { } (ul에서 마지막 자식 li 선택)
ul li:nth-child(2) { } (ul에서 두 번째 자식 li 선택)
ul li:nth-child( 6) { } (ul에서 여섯 번째 자식 li 선택)
ul li:nth-child(even/2n) { } (짝수 자식 모두 선택 )
ul li:nth-child(odd /2n+1) { } (홀수인 자식 모두 선택)
ol li:nth-child(n) { } (0부터 시작 1을 더할 때마다 역방향 계산은 n이 되어야 합니다. 불가능합니다. 다른 문자로 선택하세요. (다섯 번째 자식부터 계산)
ul li:first-of-type { }(첫 번째 자식)
ul li:last-of-type { }(마지막 자식)
ul li:nth-of-type(even) { } (even child)
section div:nth-child(1) { } (nth-child는 모든 상자를 일련번호로 정렬합니다. 실행 시 먼저 다음을 살펴보세요. : nth-child(1) 그런 다음 다시 돌아가서 이전 div를 살펴보세요.)
section div:nth-of-type(1) { } (nth -of-type은 지정된 요소의 상자를 다음에서 정렬합니다. 시퀀스; 실행 시 먼저 div에 지정된 요소를 살펴본 다음 다시 돌아가서 다음을 살펴보세요. n번째 유형(1) 하위 항목 수)
의사 요소 선택기(페이지에서 찾을 수 없음, 글꼴 태그에 자주 사용됨) [태그 선택기와 동일, 가중치는 1]
::before 요소 앞(상위 상자 내부 앞)에 콘텐츠 삽입

::after in Insert 요소 뒤의 콘텐츠(상위 상자 내부 뒤)

위 내용은 클래스 이름 선택기가 CSS3에 새로운가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：