클래스 이름 선택기가 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 새로운 선택기

속성 선택기

• input[value] { } (입력 및 값 속성 있음)

• input[type=text] {} {입력 속성 값 텍스트를 변경해야 합니다}

• div[class^=icon] { } (div인 요소를 먼저 선택한 다음 class 속성을 갖고 속성 값은 icon으로 시작해야 합니다)

• section[class$ = data] {} (data로 끝나는 클래스 이름 선택)

구조적 의사 클래스 선택기

• 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 요소 뒤의 콘텐츠(상위 상자 내부 뒤)

• 에는 콘텐츠 속성

• div::after { content: 'I';}

• .tudou:hover::before { } (마우스가 감자 상자 위로 지나갈 때 내부의 마스크 전 레이어가 표시되도록 합니다.)

• 의사 요소 클리어 및 부동

• (동영상 공유 학습:

  css 동영상 튜토리얼
,
• html 동영상 튜토리얼

  )

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