CSS 선택기란 무엇인가요? CSS 선택기는 CSS가 작동해야 하는 태그를 지정하며 해당 태그의 이름은 선택기입니다. 의미: 어떤 컨테이너를 선택할지. HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다. 그렇다면 CSS 선택자는 무엇입니까? CSS에서 일반적으로 사용되는 선택기를 살펴보겠습니다.
1: CSS 와일드카드 선택기
와일드카드 선택기는 별표(*)로 표시됩니다. 예:
*{ font-size : 12px; }
는 모든 요소의 글꼴 크기가 12px임을 의미합니다. ;
2: CSS 그룹 선택기
여러 요소가 동일한 스타일 속성을 갖는 경우 명령문을 함께 호출할 수 있으며 요소는 쉼표로 구분됩니다. 예:
p, li { line-height:20px; color:#c00; } #main p, #sider span { color:#000; line-height:26px; }
그룹 선택기를 사용하면 CSS 코드가 크게 단순화됩니다. 동일한 속성이 여러 개 있는 요소를 병합하고 그룹화하여 선택할 수 있으며, 동일한 CSS 속성을 정의할 수 있어 코딩 효율성이 크게 향상되고 시간도 단축됩니다. 필수입니다. CSS 파일의 크기입니다.
3: CSS 태그 선택기
완전한 HTML 페이지는 다양한 태그로 구성되며 태그 선택기는 해당 CSS 스타일을 사용하는 태그를 결정합니다. 예:
p{ color: red; }
이 코드는 모든 p 태그를 빨간색으로 만듭니다.
4: CSS 클래스 선택기
클래스 선택기는 클래스 속성에 지정된 클래스 이름이 있는 모든 요소를 대상으로 합니다. 예를 들어
.info { color:black; }
색상이 변경됩니다. 클래스 이름이 info인 모든 요소는 black
5:css ID 선택기
ID 선택기는 특정 ID ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. 선택기는 "#" 기호로 시작합니다. 예:
#demop{ color:#000; }
이것은 글꼴 색상을 검은색으로 설정하는 데모 ID를 가진 요소를 나타냅니다.
6: CSS 의사 클래스 선택기
마우스 호버 등 문서 이외의 다른 조건을 사용하여 요소의 스타일을 적용해야 하는 경우가 있습니다. 이때 의사 클래스를 사용해야 합니다. 다음은 연결된 애플리케이션에 대한 의사 클래스 정의입니다. 예:
a:link{ color:green ; font-size: 50px } a:hover{ color:pink; font-size: 50px } a:active{ color:yellow; font-size: 50px } a:visited{ color:red; font-size: 50px }
효과:
웹페이지를 열면 라벨이 녹색입니다.
라벨에 마우스를 올리면 라벨이 분홍색입니다.
클릭하면 라벨이 노란색이 됩니다.
클릭하면 라벨이 빨간색이 됩니다.
7: CSS 자손 선택기
자손 선택기는 특정 요소나 요소 그룹의 자손을 선택하는 데 사용됩니다. 상위 요소 선택은 앞에 배치되고 하위 요소 선택은 뒤에 배치되어 구분됩니다. 중간에 공백으로. 하위 항목 선택기에는 두 개 이상의 요소가 있을 수 있습니다. 다중 레벨 조상-하위 관계의 경우 이를 구분하기 위해 공백이 여러 개 있을 수 있습니다. 예를 들어 ID가 a, b, c인 세 개의 요소가 있는 경우 하위 항목입니다. 선택기는 #a #b #c{} 형식으로 작성할 수 있습니다. 단, 조상 요소 선택이 하위 요소 앞과 중간에 공백으로 구분되어 있어야 합니다. 예:#people em{ color: red; }
9: CSS 속성 선택기
형식: 기본 선택기 [속성 = '속성 값']{ }, 속성만 작성할 수도 있습니다. 예:p.info { color:blue; }
css 선택기 우선 순위 size:
!중요 > 인라인 스타일 > ID 선택자 > 속성 선택자 > 태그 > 상속 > 브라우저 기본 속성 그런 다음 가중치를 사용하여
css 선택기 가중치 계산:
!important 1000
ID Selector
| 클래스|속성|의사 클래스 선택기 |
태그 선택기 | |
와일드카드 선택기 | |
0 | |
위 내용은 CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!