작업 7-css 선택기

1,class와 id의 사용 장면은?
#id: id 선택기, 특정 id의 요소와 일치하며, 하나의 페이지 ID는 유일성을 가지며, id 선택기는 하나의 요소를 개별적으로 선택할 수 있습니다.class: 클래스 선택기. 클래스에 속하는 모든 요소와 일치하며 여러 요소를 선택할 수 있습니다.
2. CSS 선택기에서 흔히 볼 수 있는 것은 몇 가지입니까?
클래스 선택기 ID 선택기 태그 선택기 속성 선택기 위조 클래스 선택기 위조 요소 선택기
3. 선택기의 우선순위는 어떻게 됩니까?복잡한 장면에 대해 어떻게 우선순위를 계산합니까?
위에서 아래로, 높은 것에서 낮은 것까지 우선순위.1) 속성 뒤에서 사용!important은 페이지의 모든 위치에서 정의된 요소 스타일 2)을 스타일 속성으로 덮어씁니다. 요소 탭에 내연 스타일 3) id 선택기 4) 클래스 선택기 5) 위조 클래스 선택기 6) 속성 선택기 7) 탭 선택기 8) 어댑터 선택기 9) 브라우저 사용자 정의
복잡한 장면에서 먼저 선택기를 다음과 같은 원칙에 따라 분류한다. 행내 스타일 ==>a ID 선택기 ==>b 클래스, 속성 선택기와 위조 선택기 ==>c 라벨 선택기, 위조 요소 ==>d 계산 선택기 조합에서 각 유형의 선택기의 수량을 a에서 d로 비교하면 a클래스 수량이 많은 우선순위가 높다. 만약에 a클래스 수량이 같으면 b클래스 수량을 비교한다.순서대로 유추하다.만약 수량이 같다면 코드 순서는 뒤에 있는 것이 우선이다.
4,a:link,a:hover,a:active,a:visited의 순서는 어떻게 됩니까?왜?
실제 사용 중, 순서는 a:link, a:visited, a:hover, a:active입니다.링크를 눌렀을 때 a:visited 상태가 활성화되기 때문에 우선순위 원칙에 따라 네 개가 똑같습니다. 이때 누가 마지막으로 설명하는지 보면 앞의 스타일을 덮어씁니다.만약 a:visited가 3위에 놓여 있다면 a:hover는 덮어쓰이고 a:visited는 마지막에 놓여 있으면 a:hover와 a:active는 덮어쓰여 올바르게 보이지 않습니다.
5. 다음 선택기는 각각 무슨 뜻입니까?

#header{}   id header   。
.header{}    class     header     。
.header  .logo{}      class  header     ， class  logo   ，       。
.header.mobile{}      ，             。
.header p, .header h3{}      header      P  ，      header      H3  。
#header .nav>li{}   ID  header         nav       li  。
#header a:hover{}   ID  header              a  。
#header .logo~p{}    ID  header         logo        logo      P  。
#header input[type="text"]{}    ID  header       type    text input    。

6. 당신이 알고 있는 위조 선택기를 열거
E:first-child 매칭 요소 E의 첫 번째 하위 요소 E:link 매칭 클릭하지 않은 모든 링크 E:visited 매칭 클릭한 모든 링크 E:active 매칭 마우스를 눌렀습니다.아직 방출되지 않은 E 요소 E:hover 매칭 마우스의 E 요소 E:focus 매칭 현재 초점을 획득한 E 요소 E:lang (c)lang 속성이 c와 같은 E 요소 E:enabled 매칭 폼에서 사용할 수 있는 요소 E:disabled 매칭 폼에서 사용하지 않는 요소 E:checked 매칭 폼에서 선택된 라디오 또는 checkbox 요소 E::::selection 매칭 폼에서 현재 선택한 요소 E:root 매칭 문서의 루트 요소, HTML 요소 E:nth-child(n)가 부모 요소와 일치하는 n번째 하위 요소,첫 번째 번호는 1E:nth-last-child(n)가 부모 요소와 일치하는 밑의 n번째 하위 요소이고, 첫 번째 번호는 1E:nth-of-type(n)이다.:nth-child(n)와 유사하지만, 같은 라벨을 사용하는 요소만 일치한다. E:nth-last-of-type(n)은:nth-last-child()와 유사하지만, 같은 라벨을 사용하는 요소만 일치한다. E:last-child는 부모 요소의 마지막 하위 요소와 일치한다.같은 값: nth-last-child(1) E:first-of-type은 부모 원소에 일치하는 첫 번째 하위 요소를 사용한다. 같은 값: nth-of-type(1) E:last-of-type은 부모 원소에 일치하는 마지막 하위 요소를 사용한다. 같은 값: nth-last-of-type(1) E: only-child는 부모 원소에 있는 유일한 하위 원소와 일치한다.같은:first-child:last-child 또는:nth-child(1):nth-last-child(1)E:only-of-type은 부모 요소에 일치하는 유일한 하위 요소를 사용합니다.first-of-type:last-of-type 또는:nth-of-type(1):nth-last-of-type(1)E:empty는 하위 요소가 포함되지 않은 요소와 일치합니다.텍스트 노드도 하위 요소 E:not(selector) 일치가 현재 선택기에 맞지 않는 요소로 간주됩니다.
7.div:first-child와div:first-of-type의 작용과 차이
div:first-child는 모든div 요소의 부모 요소 아래의 첫 번째 하위 요소와 일치합니다.div:first-of-type은 모든div원소의 부원소 아래 첫 번째div자원소를 배합합니다.두 번째 선택기는 같은 종류를 요구합니다. 즉div 라벨입니다.
8. 다음 코드를 실행하고 출력 양식의 원인을 분석한다.

   
aa
       ，     。  .item1:first-child       ，    .item1     div       。  .item1     div         p  。
   
bb
      ，      。    .item1     div         h3  。
   
ccc
           ，     。