CSS에는 어떤 선택자가 있습니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!