CSS 의사 클래스 : 지수를 기반으로 한 스타일 요소
- Lisa Kudrow원래의
- 2025-02-19 11:26:09180검색
CSS 선택기 : 문서 하위 트리의 요소 위치를 기반으로 한 의사 클래스 선택
코어 포인트
CSS는 문서 하위 트리의 위치에 따라 요소와 일치하는 하위 인덱스 의사 클래스라고하는 선택기를 제공합니다. 여기에는 , ,
, , 및 가 포함됩니다.-
및
- pseudo 클래스는 기능적이며
:first-child키워드,:last-child키워드, 정수 또는:only-child형태로 매개 변수를 허용 할 수 있습니다. 여기서 a는 단계 간격이고 b는 다음과 같습니다. 바이어스 시프트, N은 양의 정수입니다.:nth-child():nth-last-child()의사 클래스는 요소가 다른 요소의 유일한 자식이라면 요소와 일치합니다.의사 클래스는 공백이 아닌 자식 요소가없는 요소를 선택할 수 있습니다. - ,
:nth-child(), , 및 가 포함됩니다.:nth-last-child()oddCSS는 또한 문서 하위 트리의 위치에 따라 일치하는 요소에 대한 선택기를 제공합니다. 이를 유형, 속성 또는 ID가 아닌 요소의 위치 또는 순서에 의존하기 때문에 하위 인덱스 의사 클래스라고합니다. 총 5 개가 있습니다evenAn B -
:only-child:empty -
:first-of-type:last-of-type:only-of-type:nth-of-type():nth-last-of-type()및
의사 클래스를 사용하여 노드 (요소)의 첫 번째 또는 마지막 하위 요소 인 요소를 선택할 수 있습니다. 다른 의사 클래스와 마찬가지로 및
는 간단한 선택기에 의해 정의 될 때 가장 부작용이 가장 적습니다. 및 자격을 갖추면 더 의미가 있습니다. 항목을 나열하도록 선택을 제한합시다. :first-child로 :last-child로, :first-child로 변경하십시오. 다음 그림은 결과를 보여줍니다. li:first-child
:last-child li:last-child
like , :nth-child() 및 :nth-last-child()도 기능적 의사 클래스입니다.
키워드
키워드
:nth-child() :nth-last-child() 형식의 매개 변수, 여기서 a는 단계 간격이고, b는 오프셋이고, n은 양의 정수를 나타내는 변수이다.
:not()
:nth-child()와 :nth-last-child()의 차이점은 무엇입니까? 출발점 :
- 를 뒤로 계산하십시오. CSS 인덱스는 0 대신 1로 시작하여 카운트 숫자를 사용합니다.
-
odd및 둘 다 교대 모드에서 사용할 수 있습니다. 얼룩말 패턴 테이블 행 색상 생성은 완벽한 사용 사례입니다. 다음 CSS는 균일 한 테이블 행에 대한 연한 청색 회색 배경을 제공하며 결과는 다음 그림에서 볼 수 있습니다.
-
even - 로
로 전환하면 아래 그림과 같이 카운트가 바닥에서 시작 되므로이 밴드를 반전시킵니다. -
An B더 복잡한 매개 변수의 복잡한 예를 시도하는 방법은 무엇입니까? 20 개의 항목이 포함 된 아래 표시된 문서부터 시작합니다.
및 :nth-child()를 사용하여 특정 위치에서 개별 자식 요소를 선택할 수 있습니다. 특정 위치 후에 :nth-last-child()의 모든 하위 요소를 선택하거나 오프셋으로 배수로 요소를 선택할 수 있습니다. 여섯 번째 프로젝트의 배경색을 바꾸자 :
<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</code>
를 사용하여 포인트 후 모든 요소를 선택할 수 있습니다. 처음 일곱 가지 요소를 제외한 모든 요소를 선택해 보겠습니다.
An B
<code class="language-css">tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}</code>
를 사용하면 선택을 반전하고 처음 8 개의 요소와 일치합니다. 
:nth-child() :nth-last-child()
<code class="language-css">.item:nth-child(6) {
background: #e91e63;
}</code>
자식이라면 의사 클래스는 해당 요소와 일치합니다. 아래는 두 개의 변하지 않은 목록입니다. 첫 번째 프로젝트에는 프로젝트가 있고 두 번째 프로젝트에는 세 가지가 포함되어 있습니다.
Apple 사용은 첫 번째 목록의 유일한 자식 요소이므로 Apple을 선택합니다. 그러나 두 번째 목록의 모든 항목은 세 가지 형제 요소가 있기 때문에 일치하지 않습니다. 아래 그림에서 어떻게 보이는지 볼 수 있습니다. 
:empty
pseudo 클래스를 사용하여 하위 요소없이 요소를 선택할 수도 있습니다. 우리가
:empty
라고 말할 때, 우리는 :empty empty 를 의미합니다. 요소가 pseudo-class와 일치하게하려면 다른 공백도 포함 할 수 없습니다. 다시 말해, :empty 는 일치하지만 는 일치하지 않습니다. 때로는 Wysiwyg 편집기가 컨텐츠에 빈 P 요소를 삽입합니다. :empty <p></p>를 사용하여 <p> </p>를 사용하여 이러한 요소에 스타일을 적용하지 않습니다. :empty
:not()는 부모 요소의 두 번째 요소 인 각 p 요소를 선택합니다. p:not(:empty)
이 섹션에서는 타이핑 된 하위 인덱스 의사 클래스에 대해 논의 할 것입니다. 이 의사 클래스는 또한 인덱스 값을 기준으로 요소와 일치하지만 일치는 특정 유형의 요소로 제한됩니다. 예를 들어, 다섯 번째 P 요소 또는 균일 인덱스가있는 H2 요소를 선택하십시오.
p:nth-last-child(2)
-
:first-of-type이러한 의사 클래스와 하위 인덱스 의사 클래스의 차이는 미묘합니다. 여기서 는 P 요소 인 경우에만 다섯 번째 항목과 일치하고 는 모든 p 요소와 일치 한 다음이 요소들 사이에서 다섯 번째 p 요소를 찾습니다. -
약간 다른 문서부터 시작하겠습니다. 여전히 20 개의 항목이 있지만 일부는 P 요소이고 일부는 div 요소입니다. P 요소는 아래와 같이 둥근 모서리가 있습니다. :last-of-type -
:only-of-type사용 , 및 -
:nth-of-type()를 사용하십시오 를 사용하여 선택기와 일치하는 첫 번째 요소를 선택할 수 있습니다. 첫 번째 P 요소에 대한 라임 녹색 배경을 어떻게 제공합니까 : -
:nth-last-of-type()이것은 아래와 같이 부모 요소의 첫 번째 p 요소 인 각 p 요소와 일치합니다.
의사 클래스는 비슷하게 작동하며, 이는 아래와 같이 부모 요소의 마지막 요소와 일치합니다. 그러나 요소가 부모 요소의 고유 한 p:nth-child(5) 인 경우 p:nth-of-type(5)는 아래와 같이 해당 요소와 일치합니다.
:first-of-type ::first-letter
<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</code> 및
는 또한 기능적 의사 클래스입니다. 그들은 
및
와 마찬가지로 인덱스는 동일한 유형의 요소로 해결됩니다. 예를 들어, 첫 번째 P 요소와 각 후속 P 요소를 선택하려면 : 로 :nth-of-type 키워드를 사용할 수 있습니다.
:nth-last-of-type
아래 이미지에서 볼 수 있듯이 홀수 번호가있는 자식 요소가 아닌 홀수 번호가있는 P 요소에만 일치합니다.
:nth-of-type()
<code class="language-css">tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}</code>
CSS 의사 클래스는 선택기에 추가 된 키워드이며 선택된 요소의 특수 상태를 지정하는 데 사용됩니다. 예를 들어,
는 사용자의 포인터가이를 떠날 때 버튼의 색상을 변경하는 데 사용될 수 있습니다. 의사 클래스는 클래스 및 ID와 함께 HTML 태그를 변경하지 않고 요소에 스타일을 적용하는 방법입니다.
의사 클래스는 어떻게 작동합니까? :nth-child
의사 클래스는 동시 요소 그룹의 요소 위치에 따라 요소와 일치합니다. "a"와 "b"는 정수 값 인 함수와 같은 구문
를 사용합니다. "N"은 0에서 시작하는 카운터이며 각 요소에 대해 1 씩 증가합니다. "B"는 첫 번째 요소 (b = 1)부터 시작하여 선택해야 할 요소를 의미합니다.
:nth-child와 :nth-child(an b)의 차이점은 무엇입니까?
는 동일한 유형의 형제 자매 요소의 위치 만 고려합니다. 예를 들어, 요소 인 경우 두 번째 하위 요소가 선택되고 <code>:nth-child는 두 번째 요소를 선택합니다. 다른 형제 요소의 위치. <code>:nth-of-type
주어진 클래스 이름을 사용하여 첫 번째, 두 번째 또는 세 번째 요소를 선택하는 방법은 무엇입니까?
pseudo 클래스를 사용할 수 있습니다. 예를 들어, :nth-child는 클래스 "myclass"가있는 첫 번째 요소를 선택합니다. 요소가 부모 요소의 첫 번째 자식 인 경우에만 작동합니다. :nth-of-type
p:nth-child(2)
<p></p> 아니요, p:nth-of-type(2) 음수 값은 허용되지 않습니다. 당신이 사용할 수있는 최소값은 0이므로 요소를 선택하지 않습니다. <p></p>
를 사용하여 각 짝수 또는 홀수 요소를 선택할 수 있습니다. 예를 들어,
는 첫 번째 요소에서 시작하는 각 초 요소를 선택합니다.
다른 의사 클래스와 함께 :nth-child를 사용할 수 있습니까? .myClass:nth-child(1)
는 사용자의 포인터가 두 번째 자식 요소 위로 떠 다니면 스타일을 적용합니다. :nth-child
와 사이에 성능 차이가 있습니까? :nth-child
대부분의 경우 성능 차이는 무시할 수 있습니다. 그러나 많은 수의 요소를 다룰 때
의사 요소와 함께
를 사용할 수 있습니까?
:nth-child와 함께 사용할 수 없습니다. 왜냐하면 문서 트리의 일부로 간주되지 않기 때문입니다. :nth-child(even)
모든 최신 브라우저는 잘 지원됩니다. 그러나 Internet Explorer 8 이하는 지원되지 않습니다. 이 브라우저의 경우 유사한 효과를 달성하려면 JavaScript 또는 JQuery를 사용해야 할 수도 있습니다. :nth-child
모든 사진은 원래 형식과 위치로 유지됩니다.
:nth-child
모든 사진은 원래 형식과 위치로 유지됩니다. 위 내용은 CSS 의사 클래스 : 지수를 기반으로 한 스타일 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!