CSS3에는 어떤 의사 클래스 선택자가 있고, 의사 클래스 선택자 nth-child()를 사용하는 방법은 무엇입니까?

CSS3의 새로운 속성은 의사 클래스 선택기 nth-child()와 같은 많은 편의를 제공하지만 IE6-8 및 FF3.0 브라우저에서는 지원되지 않으며 CSS3의 n번째 유형( n) (예: nth-of-type(1)) 이 특수 클래스 선택기는 보다 개인화된 제목과 단락 등을 설정할 수 있습니다. 그러나 현재 nth-of-type(n)은 Firefox 3, Opera, Safari 및 일부 브라우저만 지원합니다. 크롬과 같은.

:nth-child()는 요소의 하나 이상의 특정 하위 요소를 선택합니다. 다음과 같은 방법으로 선택할 수 있습니다.

:nth-child(length);/*매개변수는 특정 숫자 길이입니다. 정수 */

:nth-child(n);/*매개변수는 n, n은 0부터 시작*/

:nth-child(n*length)/*n의 배수 선택, n은 0부터 시작 * /

:nth-child(n+length);/*길이보다 큰 길이 뒤의 요소 선택*/

:nth-child(-n+length)/*길이보다 작은 길이 앞의 요소 선택 길이*/

:nth -child(n*length+1);/*숫자 하나 걸러 하나씩 선택함을 나타냄*/

예:

li:nth-child(3){배경:orange;}/*Set 세 번째 li의 배경을 주황색으로 설정*/

li:nth-child(3n){Background:orange;}/*li의 3번째, 6번째, 9번째,..., 모든 배수의 배경을 주황색으로 설정* /

li: nth-child(n+3){배경:orange;}/*세 번째 요소 뒤에서 li 배경을 선택하고 주황색으로 설정합니다*/

li:nth-child(-n+3) {Background:orange;} /*배경을 주황색으로 설정하려면 세 번째 요소 앞의 li를 선택하세요*/

li:nth-child(3n+1){Background:orange;}/*이 방법은 다음을 달성하는 것입니다. 몇 개 중에서 하나를 선택하는 효과* /

:fist-child는 요소의 첫 번째 하위 요소를 선택합니다

예:

li:first-child {배경: 녹색;}/*배경을 설정합니다 첫 번째 li를 녹색으로*/

:last-child는 요소의 마지막 하위 요소를 선택합니다

예:

li:last-child {배경: 녹색;}/*마지막 li의 배경을 녹색으로 설정 */

:nth-last-child()는 이 요소의 마지막 하위 요소

:nth-last-child() 선택기와 이전 :nth에서 시작하여 요소의 하나 이상의 특정 하위 요소를 선택합니다. -child()는 여기에 추가 마지막 요소가 있다는 점을 제외하면 매우 유사하므로 해당 기능은 이전 ":nth-child"와 다릅니다. 특정 요소를 선택하려면 마지막 요소부터 계산하면 됩니다.

예:

li:nth-last-child(4) {배경: red;}/*마지막 네 번째 li의 배경을 빨간색으로 설정*/

:nth-of-type() 선택 및 지정

:nth-of-type 요소는:nth-child와 유사합니다. 차이점은 선택기에 지정된 요소만 계산한다는 것입니다. 실제로 이전 예제에서는 지정된 모든 특정 요소에 주로 사용됩니다. 이는 다양한 유형의 요소가 포함된 요소를 찾는 데 유용합니다. 예를 들어 div.demo 아래에는 많은 p 요소, li 요소, img 요소 등이 있지만 p 요소만 선택하고 다른 모든 p 요소에 다른 스타일을 지정하면 됩니다.

p:nth-of-type(even) {배경색: 라임;}

n을 홀수(짝수) 또는 짝수(홀수)로 설정하는 것 외에도 n을 표현식으로 설정할 수도 있습니다. 예를 들어 , nth-of-type(3n+2)

:nth-last-of-type()은 마지막 요소부터 계산하여 지정된 요소를 선택합니다

말할 필요도 없이 누구나 이 선택자를 상상할 수 있습니다. 요소 유형을 참조한다는 점을 제외하면 이전 :nth-last-child와 동일하게 사용됩니다.

IE6-8 및 FF3.0에서도 - 브라우저는 이 선택기를 지원하지 않습니다.

: first-of-type은 상위 요소 아래에서 첫 번째 유사한 하위 요소를 선택합니다.

: last-of-type은 상위 요소의 마지막 유사한 하위 요소

:nth-of-type,:nth-last-of-type;: first-of-type 및 :last-of-type은 실제로는 그다지 의미가 없습니다. 앞서 이야기한 nth-child와 같은 선택자는 이 기능을 구현할 수 있습니다. 그러나 관심이 있는 경우에는 여전히 이에 대해 배울 수 있습니다. 개인적으로 실용적인 가치는 그리 크지 않다고 생각합니다. 이러한 진술은 참고용일 뿐입니다.

:only-child는 요소가 상위 요소의 유일한 하위 요소임을 의미합니다

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

ul에 p 요소가 하나만 있을 때 이 li의 스타일을 변경해야 한다면 지금 사용할 수 있습니다. :only-child, 예:

ul li {padding-left:10px;}

ul li:only-child {padding-left:15px}

:only-of-type은 요소를 상위 요소로 선택합니다. 동일한 유형의 유일한 하위 요소

는 요소에 많은 하위 요소가 있고 그 중 하나만 고유하다는 것을 의미합니다. 그러면 이 선택 방법을 사용하여 Say

<section>
<h2 id="伪类选择器的用法">伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

와 같은 유일한 하위 요소를 선택할 수 있습니다. 위의 h2 요소만 선택하려면 다음과 같이 작성할 수 있습니다.

h2:only-of-type{color:red;}

:empty 선택한 요소에 콘텐츠가 없습니다

:empty가 사용됩니다. 내용이 없는 요소를 선택하려면 여기에 내용이 전혀 없다는 의미입니다. 예를 들어 문단이 3개인데 그 중 하나가 아무것도 없으면 이 p를 표시하지 않으려면 다음과 같이 하세요. 그런 다음 다음과 같이 작성할 수 있습니다:

p:empty {display: none;}

위 내용은 CSS3에는 어떤 의사 클래스 선택자가 있고, 의사 클래스 선택자 nth-child()를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!