다양한 CSS 선택기와 가져오기 스타일 시트 및 일부 의사 클래스 선택기에 대한 자세한 설명

(1) CSS 선택자 :

1. 태그 선택자 : HTML 태그명을 통해 태그를 직접 선택

2. 클래스 선택자 : 선택자 이름을 통해 { } 선택 클래스 속성이 추가된 태그

　　3. ID 선택기: #선택기 이름{}을 사용하여 ID 속성이 추가된 태그를 선택합니다. ID는 HTML 문서에서 고유합니다.

4. 범용 선택기: 사용 *{} HTML 문서의 모든 태그 선택

5. 하위 선택기: 선택기 1(공백) 선택기 2 태그 선택 해당 모든 하위 태그

6. 하위 선택기: 선택기 1 > 선택기 2 - 태그에서 직접 생성 하위 태그를 선택합니다. 이는 더 깊은 하위 태그에는 작동하지 않습니다.

7. 교차 선택기: 선택기 1(중간 공백 없음) 선택기 2 예: # li.li{}는 ID=li 및 class=li인 태그를 선택합니다

8. Union 선택기: 선택기 1. 선택기 2 예: #li.li{}는 ID=li 또는 class인 태그를 선택합니다. =li

(2) 선택기의 우선순위:

1. 동일하게 사용된 것으로 취급합니다. 레이어의 레이블은 예를 들어 모두 레이블에 직접 작용합니다. li: ID selector> 클래스 선택자>레이블 선택자>유니버설 선택자

　　2. 가장 안쪽 선택자가 바깥쪽 선택자보다 우선합니다: div ul li>#ul li 태그는 ul의 가장 안쪽에 있습니다. 선택기

3. 동일한 레이어에 사용되고 마지막 레이어 선택기가 동일한 경우 레벨이 높을수록 더 정확한 것이 우선 적용됩니다: div ul li>div li

4. 우선순위가 정확히 동일하면 이후 스타일이 이전 스타일을 재정의합니다.

보충: 5. 우선순위 알고리즘: 스타일 = 1000(인라인 스타일 시트) id = 100(id 선택기) 클래스 = 10 (클래스 선택기) 요소 = 1 (레이블 선택기) 사용법: 전제는 동일한 레이어에서 작동한다는 것입니다: #ul li{} 및 ul # 둘 중 어느 것이 더 높은 우선순위를 갖습니까? #ul li{}우선순위는 무엇입니까? 는 101(100+1)로 표현되고, 후자의 우선순위는 101(1+100)이므로 우선순위는 동일하다. 두 선택자가 동일한 레이어에서 동작해야 한다는 전제이다

(3) 스타일 시트를 연결하는 세 가지 방법 : 스타일 시트 가져 오기

1. 인라인 스타일 시트 : HTML 태그에 작성, 스타일 속성이 가장 우선 순위가 높지만 HTML 코드와 CSS 코드를 결합합니다. , CSS 표준 "내용과 스타일의 분리"를 준수하지 않고 추후 유지관리를 활용하지 않는

2. 내부 스타일 테이블: 헤드의 하위 태그 스타일로 작성, 분리 콘텐츠와 스타일은 어느 정도 달성되었으나 스타일 재사용 참조 방법은 실현할 수 없습니다:

3. 외부 스타일 시트: 콘텐츠와 스타일을 분리하고 나중에 유지 관리 및 재사용을 용이하게 하며 W3C 표준을 준수하며 가장 낮은 우선순위를 갖습니다. 참조: 를 통해 헤드 태그에 있습니다.

4. 스타일 시트 가져오기: 내부 스타일 시트에서 @import url(CSS 리소스 주소)을 통해 CSS 스타일 시트

를 가져옵니다. 참고: 내부 스타일 시트와 가져오기의 차이점:

1) 링크 태그는 html 태그이고 가져오기는 아님

2) 링크는 다양한 리소스에 연결할 수 있지만 가져오기는 CSS 스타일 시트만 가져올 수 있습니다

3) link 태그는 hmtl 코드와 CSS 스타일 사이의 브리지 역할을 하여 CSS 코드를 연결하는 반면, import는 CSS 스타일 시트를 가져와서 문서가 로드될 때 CSS 파일을 HMTL로 가져옵니다.

4) 링크 방법은 문서가 로딩되는 동안 CSS 스타일을 연결하는 것이고 가져오기는 html 문서가 완료된 후 CSS 스타일을 가져오는 것입니다

결론적으로 링크할 링크 태그를 선택하는 것이 가장 좋습니다

🎜>

(4) 의사 클래스 선택기:

선택기 이름: 의사 클래스 {}, 의사 클래스 레이블의 상태, 예: a:link{}: 레이블 a 레이블 방향입니다. a:hover{}: 마우스를 레이블에 놓을 때 표시되는 스타일 a:active{}: 레이블에 마우스를 눌렀을 때 표시되는 스타일; a 레이블을 방문할 때 표시되는 스타일은 다음과 같습니다. a:first-chird{}는 a 태그에 상위 컨테이너가 있고 상위 컨테이너 아래의 첫 번째 하위 태그 a가 선택되었음을 의미합니다.

다양한 CSS 선택기 및 가져오기에 대한 자세한 내용 가져온 스타일 시트 및 일부 의사 클래스 선택기와 관련된 기사는 PHP 중국어 웹사이트에 주의하세요!