7 CSS 선택 기

class 와 id 의 사용 장면 은?
class 는 전문 적 인 class 유 니 버 설 과 개인 모듈 이름 을 씁 니 다. id 는 유일 하고 우선 순위 가 너무 높 습 니 다. 유일한 요 소 를 조작 하 는 데 사용 되 지만 js 작업 dom 의 연결 로 만 스타일 을 추가 하지 않 는 것 이 좋 습 니 다.
CSS 선택 기 에서 흔히 볼 수 있 는 것 은 몇 가지 가 있 습 니까?
1. 기본 선택 기 *: 유 니 버 설 요소 선택 기, 모든 요소 E: 태그 선택 기, E 탭 을 사용 하 는 모든 요소 class 선택 기 와 일치 합 니 다. 모든 class 속성 에 info 가 포 함 된 요소 id 선택 기 와 일치 합 니 다. 모든 id 속성 은 footer 와 같은 요소 2. 조합 선택 기

E, F: 다 중 요소 선택 기, 사용, 구분, 동시에 요소 E 또는 요소 F

와 일치 합 니 다.

E F: 후대 요소 선택 기, E 요소 후대 에 속 하 는 모든 F 요소 와 일치 하 며 E 와 F 사 이 를 빈 칸 으로 구분 합 니 다

E > F: 하위 요소 선택 기, 모든 E 요소 와 일치 하 는 하위 요소 F

E + F: 인접 요소 선택 기, E 요소 에 따 른 모든 동급 요소 F

와 일치 합 니 다.

E ~ F: 일반 인접 선택 기, E 요소 와 일치 하 는 동급 원소 F (직접 인접 여부 와 상 관 없 이)

3. 속성 선택 기

[attr] 는 attr 이름 의 속성 을 가 진 요 소 를 표시 합 니 다.

[attr = value] 는 attr 로 명명 되 고 값 이 'value' 인 속성 을 가 진 요 소 를 나타 낸다.

[attr ~ = value] 는 attr 이름 의 속성 을 가 진 요 소 를 표시 하고 이 속성 은 빈 칸 으로 구 분 된 값 목록 입 니 다. 그 중 하나 이상 의 값 은 "value" 입 니 다.

[attr | = value] 는 attr 이름 의 속성 을 가 진 요 소 를 표시 합 니 다. 속성 값 은 "value" 또는 "value -" 를 접두사 ("-" 를 연결 문자 로 하고 유 니 코드 인 코딩 은 U + 002D) 로 시작 합 니 다.전형 적 인 응용 장면 은 언어 약자 코드 와 일치 하 는 데 사 용 됩 니 다 (예 를 들 어 zh - CN, zh - TW 는 zh 를 value 로 사용 할 수 있 습 니 다).

[attr ^ = value] 는 attr 로 이름 을 짓 고 값 은 'value' 로 시작 하 는 속성 을 가 진 요 소 를 나타 낸다.

[attr $= value] 는 attr 이름 을 가 진 값 이 'value' 로 끝 나 는 속성 을 가 진 요 소 를 표시 합 니 다.

[attr * = value] 는 attr 이름 을 가 진 값 팩 에 'value' 속성 을 가 진 요 소 를 표시 합 니 다.

[attr operator value i] 속성 값 이 있 는 속성 선택 기 표현 식 의 오른쪽 괄호 (괄호) 앞 에 빈 칸 으로 간격 을 둔 알파벳 i (또는 I) 를 추가 하면 속성 값 의 대소 문자 (ASCII 문자 범위 내 알파벳)

를 무시 할 수 있 습 니 다.
4. 의사 클래스 CSS 의사 클래스 는 선택 기 에 추 가 된 키워드 로 선택 할 요소 의 특수 상 태 를 지정 합 니 다.예 를 들 어 hover 는 사용자 가 선택 기 가 지정 한 요소 에 서 있 을 때 스타일 을 적용 합 니 다.

first - child: 원소 E 와 일치 하 는 첫 번 째 키 요소

link: 클릭 되 지 않 은 링크 와 일치 합 니 다

visited: 클릭 한 모든 링크 와 일치 합 니 다

active: 마우스 와 일치 하 는 위 에서 눌 렀 지만 아직 방출 되 지 않 은 E 요소

root: 문서 와 일치 하 는 루트 요소 입 니 다. HTML 문서 에 대해 서 는 HTML 요소

입 니 다.

nth - child (n): 부모 요소 와 일치 하 는 n 번 째 키 요소, 첫 번 째 번 째 번 호 는 1

입 니 다.

nth - last - child: 부모 요소 와 일치 하 는 n 번 째 키 요소, 첫 번 째 번 째 번 호 는 1

입 니 다.

nth - of - type (n): nth - child 와 유사 하지만 같은 탭 을 사용 하 는 요소

만 일치 합 니 다.

hover: 마우스 가 멈 춘 요소 와 일치 합 니 다

focus: 현재 초점 을 얻 은 요소 와 일치 합 니 다

lang (c): lang 속성 이 c 와 일치 하 는 요소

enabled: 폼 에 사용 가능 한 요소 와 일치 합 니 다

disabled: 폼 에서 사용 하지 않 는 요소 와 일치 합 니 다

checked: 폼 에서 선 택 된 radio 나 checkbox 요소 와 일치 합 니 다

selection: 사용자 가 현재 선택 한 요소 와 일치 합 니 다

nth - last - of - type (n): nth - last - child 와 비슷 하지만 같은 탭 을 사용 하 는 요소

만 일치 합 니 다.

first - child: 부모 요소 와 일치 하 는 첫 번 째 키 요소

last - child: 부모 요소 와 일치 하 는 마지막 키 요소

first - of - type: 즉 nth - of - type (1)

last - of - type: 즉 nth - last - of - type (1)

only - child: 부모 요소 에 만 있 는 키 요소

와 일치 합 니 다.

only - of - type: 부모 요소 와 일치 하 는 유일한 키 요소

선택 기의 우선 순 위 는 어떻게 됩 니까?복잡 한 장면 에 대해 어떻게 우선 순 위 를 계산 합 니까?
!important > 내 연 > id > class > 위 류 > 속성 > 요소 > 어댑터 > 사용자 정의 복잡 한 장면 우선 순위 계산 은 최고 가중치 부터 비교 합 니 다. 마찬가지 로 다음 가중치 를 비교 합 니 다. 가중치 가 높 은 우선 순위 가 가중치 가 낮은 우선 순위 보다 높 습 니 다. 먼저 가중치 로 계량 화 합 니 다. 0 부터 한 줄 내 스타일 + 1000, 하나의 id + 100, 하나의 속성 선택 기 / class 또는 위 류 + 10, 하나의 요소 이름,혹은 가짜 원소 + 1

같은 가중치: 뒤에 나타 난 선택 기 를 마지막 규칙 으로 합 니 다

서로 다른 가중치, 가중치 가 높 으 면 효력 이 발생 한다

더 높 은 가중치 선택 기 를 포함 하 는 규칙 은 더 높 은 가중치

를 가진다.

Id 선택 기의 가중치 가 속성 선택 기보 다 높다,

문맥 관 계 를 가 진 선택 기 는 단순 한 요소 선택 기 보다 중요 하 다

요소 와 가 까 운 규칙 이 효력 이 발생 한다

마지막 으로 정 의 된 이 규칙 은 위 와 충돌 하 는 규칙 을 덮어 씁 니 다

몇 개의 요소 로 구 성 된 선택 기 에 관 계 없 이 클 라 스 선택 기의 가중치 가 높 은 것 은 하나 도 없다

어댑터 선택 기 에 도 가중치 가 있 고 가중치 가 0, 0, 0, 0 으로 여 겨 진다.예 를 들 어 *, body * 계승 되 는 css 속성 도 가중치 가 있 고 가중치 는 0, 0, 0, 0 이다.

a: link, a: hover, a: active, a: visited 의 순 서 는 어떻게 됩 니까?왜?
a: link > > a: visited > > a: hover > a: active visited 는 active 뒤에 쓰 여 있 습 니 다. a 태그 가 클릭 되면 visited 스타일 은 다른 스타일 을 덮어 쓰 고 다른 스타일 이 적용 되 지 않 습 니 다.
아래 선택 기 는 각각 무슨 뜻 입 니까?

header id 는 header 의 요소

. header class 는 header 의 요소

. header. logo 로 고 는 header 의 하위 요소

. header. mobile 병렬 관계 입 니 다. 이 class 는 2 개의 이름 이 있 고 1 개 는 header 이 며 1 개 는 mobile

입 니 다.

. header p,. header h3 공동 선택 header 아래 의 2 개의 키 요소 p 와 h3

header. nav > li header 의 하위 요소 nav 의 하위 요소 li

header a: hover id 가 header 요소 인 하위 요소 a 링크 의 마우스 서 스 펜 션 상태

header. logo ~ p id 가 header 인 요소 의 하위 요소 중 class 가 로고 인 요소 의 일반 인접 요소 p

header input [type = "text"] id 가 header 인 요소 의 하위 요소 input 이 고 type 은 text

여야 합 니 다.
당신 이 알 고 있 는 의사 선택 기 를 보 여 줍 니 다.

first - child: 원소 E 와 일치 하 는 첫 번 째 키 요소

link: 클릭 되 지 않 은 링크 와 일치 합 니 다

visited: 클릭 한 모든 링크 와 일치 합 니 다

active: 마우스 와 일치 하 는 위 에서 눌 렀 지만 아직 방출 되 지 않 은 E 요소

root: 문서 와 일치 하 는 루트 요소 입 니 다. HTML 문서 에 대해 서 는 HTML 요소

입 니 다.

nth - child (n): 부모 요소 와 일치 하 는 n 번 째 키 요소, 첫 번 째 번 째 번 호 는 1

입 니 다.

nth - last - child: 부모 요소 와 일치 하 는 n 번 째 키 요소, 첫 번 째 번 째 번 호 는 1

입 니 다.

nth - of - type (n): nth - child 와 유사 하지만 같은 탭 을 사용 하 는 요소

만 일치 합 니 다.

hover: 마우스 가 멈 춘 요소 와 일치 합 니 다

focus: 현재 초점 을 얻 은 요소 와 일치 합 니 다

lang (c): lang 속성 이 c 와 일치 하 는 요소

enabled: 폼 에 사용 가능 한 요소 와 일치 합 니 다

disabled: 폼 에서 사용 하지 않 는 요소 와 일치 합 니 다

checked: 폼 에서 선 택 된 radio 나 checkbox 요소 와 일치 합 니 다

selection: 사용자 가 현재 선택 한 요소 와 일치 합 니 다

nth - last - of - type (n): nth - last - child 와 비슷 하지만 같은 탭 을 사용 하 는 요소

만 일치 합 니 다.

first - child: 부모 요소 와 일치 하 는 첫 번 째 키 요소

last - child: 부모 요소 와 일치 하 는 마지막 키 요소

first - of - type: 즉 nth - of - type (1)

last - of - type: 즉 nth - last - of - type (1)

only - child: 부모 요소 에 만 있 는 키 요소

와 일치 합 니 다.

only - of - type: 부모 요소 와 일치 하 는 유일한 키 요소

div: first - child, div: first - of - type, div: first - child 와 div: first - of - type 의 역할 과 차이 점 (빈 칸 의 역할 에 주의)

div: first - child 가 부모 요소 와 일치 하 는 첫 번 째 키 요소

div: first - of - type 부모 요소 와 일치 하 는 첫 번 째 요소

div: first - child 와 div: first - of - type, div 뒤에 빈 칸 이 생기 면 div 아래 에 있 는 이름: first - child,: first - of - type 의 요소 가 됩 니 다.

다음 코드 를 실행 하여 출력 스타일 의 원인 을 분석 합 니 다.

aa

bb

ccc

.item1:first-child{ color: red;}

부모 요소 중 첫 번 째 클래스 가 item 1 인 요소 색상 을 빨간색 으로 설정 합 니 다. item 1: first - of - type {background: blue;}

아 이 템 의 부모 요소 의 모든 아 이 템 이라는 요소 배경 색 은 파란색 입 니 다. 바로 aa 와 bb 입 니 다. ccc 는 두 번 째 아 이 템 1 이라는 요소 이기 때문에 유효 하지 않 습 니 다