CSS의 선택기 유형 요약 및 효율성 비교 예

이 글에서는 의사 클래스 선택자와 의사 요소 선택자를 포함하여 CSS의 선택자 유형에 대한 요약 및 효율성 비교를 주로 소개합니다. 필요한 친구가 참고할 수 있습니다.

우리 모두 CSS에 Additivity( 동일한 요소는 여러 스타일 규칙으로 지정됨), 상속(하위 요소는 이전 요소의 일부 스타일과 속성을 상속함) 및 우선 순위(CSS의 중첩 및 상속으로 인해 우선 순위가 생성됩니다. 이는 결국 어떤 스타일 규칙이 지정된 요소에만 적용되나요? 하나의 규칙만 따릅니다. 구체적일수록 우선순위가 높습니다.)

위에서 보면 선택자가 구체적일수록 우선순위가 높아지는 것을 알 수 있습니다. 레벨이 높을수록

여기서 CSS 선택기를 요약해 보겠습니다.

1. 기본 선택기(태그 선택기, 범용 선택기, 클래스 및 ID 선택)

.info
2. 다중 요소 조합 선택자(레이블 선택자[그룹 선택자], 하위 요소 선택자, 인접 선택자)

선택기

설명

CSS 버전

E

태그 선택기, E 태그를 사용하는 모든 요소와 일치

选择器	描述	CSS版本
E	标签选择器，匹配所有使用E标签的元素
*	通用元素选择器，匹配任何元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素

*

범용 요소 선택기, 모든 요소와 일치

클래스 선택기, 클래스 속성의 정보를 포함하는 모든 요소와 일치

#footer

id 선택기, id 속성이 footer와 동일한 모든 요소와 일치

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	包含选择符，匹配所有被E元素包含的F元素
E>F	子元素选择器，匹配所有E元素的儿子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签

와 일치 F

선택기	설명	CSS 버전
E, F	다중 요소 선택기, 모든 E 요소 또는 F 요소를 동시에 일치, E와 F 사이를 쉼표로 구분하여 사용
E F	E 요소에 포함된 모든 F 요소와 일치하는 선택기를 포함합니다. td>
E>F	하위 요소 선택기, E 요소의 모든 하위 요소 F
E+F	인접 요소 선택기, E 요소
E~ 뒤에 오는 모든 형제 요소 F	E 태그 뒤의 형제 F 태그와 일치

选择器	描述	CSS版本
E[attribute]	匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute属性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素	2.1
E[attribute^=value]	匹配任何E标签之后的同级F标签	2.1
E[attribute$=value]	匹配所有attribute属性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute属性值是以"value"结束的E元素	3

3. 속성 선택자

4. >

5. 의사 요소 선택자

选择器	描述	CSS版本
E:first-line	匹配所有E标签内的第一行	2.1
E:first-letter	匹配所有E标签内的第一个字母	2.1
E:before	在E标签之前插入生成的内容	2.1
E:after	在E标签之后插入生成的内容	2.1

여기서 우리가 알아야 할 것은 브라우저가 선택자를 어떻게 읽는가입니다. Chris Coyier는 "Efficiently Rendering CSS"라는 기사에서 "브라우저는 선택기를 읽고 선택기의 오른쪽에서 왼쪽으로 읽는 원칙을 따릅니다. 즉, 브라우저가 선택기를 읽는 순서는 다음과 같습니다. 오른쪽에서 왼쪽으로요.”

선택기의 가장 오른쪽 부분인 선택기의 마지막 부분(이 경우 a[제목] 부분)을 "키 선택기"라고 하며 선택기의 효율성을 어떻게 결정합니까? 높은가 아니면 낮은가.

그렇다면 키 선택기를 더욱 효과적이고 효율적으로 만드는 방법은 무엇일까요? 사실, 중요한 것은 "키 선택자가 구체적일수록 성능이 높다"는 점을 파악하는 것입니다.

선택자에는 고유한 효율성이 있습니다. Steve Souders 제공:

1.id 선택자(#Myid)
2. 클래스 선택자(.myclassName)
3. 태그 선택자(P, H1, P)
4. 고급 선택자(H1+P )
5. 하위 선택자(ul > li)
6. 하위 선택자(li a)
7. 와일드카드 선택자(*)
8. 속성 선택자(a [rel ="external"])
9. 의사 클래스 선택자(a:hover, li:nth-child)
위 9개 선택자의 효율성은 높은 것부터 낮은 것 순으로 표시되며, ID 선택자는 기본 효율성은 가장 높지만 의사 클래스 선택기의 효율성은 가장 낮습니다.

누가 가장 효율적인지 알아보기 위해 다음 예를 비교해 보겠습니다.

1. #myId 스팬
2. 스팬 #myId
위의 예를 보면 위의 것보다 아래의 효율이 더 높다는 것을 알 수 있습니다. 가장 오른쪽 키 선택기가 가장 구체적이므로 위의 선택기 우선순위 순서도 따릅니다.

위 내용은 CSS의 선택기 유형 요약 및 효율성 비교 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!