CSS 복합 선택기란 무엇입니까?-CSS 튜토리얼-php.cn

CSS 복합 선택기란 무엇입니까?

藏色散人

풀어 주다： 2020-09-17 09:58:20

원래의

7505명이 탐색했습니다.

CSS 복합 선택기란 무엇입니까?

CSS 복합 선택기는 보다 정확하고 상세한 대상 요소 태그를 선택하기 위해 두 개 이상의 기본 선택기로 구성되며 다양한 방식으로 결합됩니다.

CSS 복합 선택기에는 하위 선택기, 인접 선택기, 포함 선택기, 다중 수준 선택기 중첩, 속성 선택기, 의사 선택기 및 의사 요소 선택기가 포함됩니다.

위의 구체적인 사용법은 다음과 같습니다.

1. 하위 선택자, 코드는 다음과 같습니다.

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>

로그인 후 복사

2. 인접 선택자

다른 요소 바로 다음에 요소를 선택해야 하고 두 요소 모두 동일한 상위 요소가 있는 경우 상대 인접 형제 선택자를 사용할 수 있습니다. .

예를 들어, h1 요소 바로 뒤에 나타나는 단락의 위쪽 여백을 늘리려면 다음과 같이 쓸 수 있습니다.

h1 + p {margin-top:50px;}

로그인 후 복사

이 선택기는 다음과 같습니다. "h1 요소 바로 뒤에 나타나는 단락, h1 및 p 요소에는 공통 상위 요소가 있습니다."

3. 포함 선택기

의 코드는 다음과 같습니다.

#header p{font-size:14px}
#main p {font-size:12}

로그인 후 복사

Definition

포함 상자에 있는 단락의 글꼴 크기는 14픽셀입니다. div id = "main"> ; 포함 상자의 단락 글꼴 크기는 12픽셀입니다.

4. 다중 레벨 선택기 중첩

코드는 다음과 같습니다.

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

로그인 후 복사

(1) 속성 이름 일치 선택기

div[class] {font-size:24px;}

로그인 후 복사

객체 정의 형식과 div에 설정된 클래스 속성이 일치하도록 선택기를 활성화합니다.

(2) 속성 값 선택기 일치

img[alt="图像"][title="图像"] {border：solid 2px red}：

로그인 후 복사

스타일 정의

(3) 퍼지 일치 속성 값 선택기

6, 의사 선택기 및 의사 요소 선택기

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

로그인 후 복사

위 내용은 CSS 복합 선택기란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!