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

WBOY
풀어 주다: 2022-06-20 15:48:46
원래의
1388명이 탐색했습니다.

클래스 이름 선택기는 CSS3에 새로운 것이 아닙니다. 구문은 ".class{css code;}"입니다. 클래스 이름 선택기는 CSS3 이전에 사용되었습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!