CSS에는 어떤 선택자가 있습니까?-프런트엔드 Q&A-php.cn

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

藏色散人

풀어 주다： 2023-01-07 11:41:53

원래의

7396명이 탐색했습니다.

CSS의 선택기에는 다음이 포함됩니다. 1. 단순 선택기 2. 속성 선택기 4. 의사 클래스 선택기 6. 다중 선택기

이 문서의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

일반적인 CSS 선택자는 무엇입니까?

1. 단순 선택자

Selector	의미
*	범용 요소 선택자
E	태그 선택기, E 태그를 사용하는 모든 요소와 일치
.info	class 선택기, 클래스 속성에 정보가 포함된 모든 요소와 일치
#footer	id 선택기, id 속성이 동일한 모든 요소와 일치 to footer

2. 속성 선택자 속성 선택자

Selector	의미
[atrr]	값에 관계없이 attr 속성을 포함하는 모든 요소를 선택합니다. attr
[attr=val]	[attr=val] attr 속성에 val 값이 할당된 모든 요소만 선택합니다

3. 결합 선택자 Combinators

와 일치하는 요소의 다음 인접 요소인 요소를 선택합니다.

선택자	의미
A, B	A 또는/및 B와 일치하는 요소를 선택합니다
A B	B와 일치하고 A와 일치하는 요소의 하위 요소인 요소를 선택합니다(공백은 A와 B로 구분됨)
A > B	B와 일치하고 A
A + B	B와 일치하고 A
A ~ B	B와 일치하는 다음 N개의 인접 요소를 선택하고 A

4 의사 클래스

Selector	의미
a : link	클릭하지 않은 모든 링크와 일치
a:visited	클릭한 모든 링크와 일치
a:hover	마우스가 가리키고 있는 요소와 일치
a:active	과 일치 마우스를 눌렀지만 놓이지 않은 요소
li:first-child	는 상위 요소의 첫 번째 하위 요소 li와 일치합니다.
li:last-child	마지막 하위 요소와 일치 부모 요소의 li 요소
li:nth-child(n)	부모 요소의 n번째 자식 요소 li와 일치(홀수 홀수, 짝수)

5. 의사 요소 의사- elements

Selector	Meaning
E::before	E 요소 내에 하위 요소를 생성하고 생성된 콘텐츠를 의사 요소로 삽입한 후 맨 앞에 배치합니다
E::after	E 요소 내에 하위 요소를 생성하고 생성된 내용을 의사 요소로 삽입한 후 마지막에 배치합니다
E::selection	문서에서 강조 표시된 부분에 적용 사용자가 (마우스가 선택한 부분을 사용하는 등)
E::first-letter	E 요소의 첫 글자, 첫 줄의 첫 글자
E::first와 일치합니다. -line	E 요소의 첫 글자와 일치합니다. 한 줄

6. 다중 선택기

HTML에서는 때때로 다음과 같이 동일한 태그에 여러 클래스 이름을 지정합니다.
<p class="one two"></p>
로그인 후 복사
그리고 CSS에서는,
.one .two{}    /*两个 class 中有空格*/
.one.two{}     /*两个 class 中沒有空格*/
.one, .two{}   /*两个 class 中出现逗号*/
로그인 후 복사
이 세 가지one.two{ }，.one .two{ }，或者是.one, .two{ }의 차이점은 무엇인가요?

첫 번째와 두 번째 사이에 공백이 있습니다. 이는 내가 선택되려면 두 가지 모두를 갖춰야 한다는 의미입니다.

두 번째 클래스와 두 번째 클래스 사이에는 공백이 없습니다. 즉, CSS에서 선택하려면 특정 블록에 클래스 1개와 클래스 2개가 모두 있어야 합니다.

세 번째 하나와 두 개에는 쉼표가 포함되어 있는데, 이는 수업에 한두 개가 있으면 편집자가 선택한다는 의미입니다.

간단히 말하면 공백이 없으면 선택하려면 동시에 포함되어야 함을 의미합니다. 공백은 이전 클래스에 포함된 경우 다음 클래스가 선택된다는 의미입니다. 포함되어 있으면 선택됩니다.

【추천 학습: "css 동영상 튜토리얼"】

위 내용은 CSS에는 어떤 선택자가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!