CSS 선택기에는 1. 카테고리 선택기, 3. ID 선택기, 5. 하위 선택기, 7. 범용 선택기, .인접 형제 선택자 10. 속성 선택자 11. 의사 요소 선택자.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 선택기 소개:
1. 카테고리 선택기
클래스 선택기는 앞에 "."로 표시된 클래스 이름을 기준으로 선택합니다.
예:
.demoDiv{ color:#FF0000; }
2. 태그 선택기
완전한 HTML 페이지는 다양한 태그로 구성되며, 태그 선택기는 해당 CSS 스타일을 사용하는 태그를 결정합니다.
style.css 파일의 p 태그 스타일 선언은 다음과 같습니다.
p{ font-size:12px; background:#900; color:090; }
3.ID 선택기
ID 선택기는 특정 ID가 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. 고유한 요소 ID를 기준으로 요소를 선택합니다. 즉, 동일한 ID는 동일한 문서 페이지에 한 번만 나타날 수 있습니다.
앞에 "#" 기호가 표시되어 있으며
#demoDiv{ color:#FF0000; }
4. 하위 항목 선택자
하위 항목 선택자라고도 하며 하위 항목을 선택하는 데 사용됩니다. 특정 요소 또는 요소 그룹의 선택 항목은 앞에 배치하고 하위 요소 선택 항목은 뒤에 배치하며 중간에 공백을 두어 구분합니다.
<style> .father.child{ color:#0000CC; } </style> <p class="father"> 黑色 <label class="child">蓝色 <b>也是蓝色</b> </label> </p>
5. 하위 선택자
하위 선택자와 하위 선택자의 차이점에 유의하세요. 하위 선택자는 직계 하위 항목만 참조하거나 하위 요소에 대해 작동하는 첫 번째 선택자로 이해하면 됩니다. 자손 선택자는 모든 하위 자손 요소에 작용합니다. 하위 선택자는 공백으로 선택하고 하위 선택자는 ">"로 선택합니다.
다음 코드를 살펴보겠습니다.
예제 소스 코드
CSS:
#links a {color:red;} #links > a {color:blue;}
HTML:
<p id="links"> <a href="#">HTML中文网</a>> <span><a href="#">CSS布局实例</a></span> <span><a href="#">CSS教程</a></span> </p>
6. 의사 클래스 선택기
때로는 스타일을 적용하기 위해 문서 이외의 다른 조건을 사용해야 할 때도 있습니다. 마우스 호버 등과 같은 요소의 이때 의사 클래스를 사용해야 합니다. 다음은 연결된 애플리케이션에 대한 의사 클래스 정의입니다.
a:link{ color:#999999; } a:visited{ color:#FFFF00; } a:hover{ color:#006600; } /* IE不支持,用Firefox浏览可以看到效果 */ input:focus{ background:# E0F1F5; }
7. 범용 선택자
범용 선택자는 *로 표시됩니다. 예:
*{ font-size: 12px; }
는 동시에 모든 요소의 글꼴 크기가 12px임을 의미하며, 범용 선택기는 하위 선택기와 결합될 수도 있습니다.
8. 그룹 선택기
여러 요소에 동일한 스타일 속성이 있는 경우 명령문을 함께 호출하고 요소를 쉼표로 구분할 수 있습니다. 예:
p, td, li { line-height:20px; color:#c00; } #main p, #sider span { color:#000; line-height:26px; } .#main p span { color:#f60; } .text1 h1,#sider h3,.art_title h2 { font-weight:100; }
그룹 선택기를 사용하면 CSS 코드가 크게 단순화됩니다. 동일한 속성이 여러 개 있는 요소를 그룹으로 병합하여 선택할 수 있으며, 동일한 CSS 속성을 정의할 수 있습니다. 이렇게 하면 코딩 효율성이 크게 향상되고 크기도 줄어듭니다. CSS 파일.
9. 인접 형제 선택자
위의 하위 선택자 및 하위 선택자 외에도 제목 h1 요소 뒤에 두 개의 단락 p 요소가 오는 것과 같이 두 형제 선택자 중 하나를 찾고 싶을 수도 있습니다. 첫 번째 단락 p 요소에 스타일을 적용합니다. 인접한 형제 선택자를 사용할 수 있습니다.
10. 속성 선택기
html 태그의 특정 속성이 존재하는지 판단하여 CSS를 정의할 수 있습니다.
속성 선택기는 요소의 속성을 기준으로 일치합니다. 해당 속성은 표준 속성이거나 사용자 정의 속성일 수 있습니다.
11. 의사 요소 선택기
모든 의사 요소 선택기는 의사 요소 위치에 배치되어야 합니다. 선택기가 나타납니다. 즉, 의사 요소 선택기 뒤에 파생된 선택기가 올 수 없습니다.
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에는 어떤 선택자가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!