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>伪类选择器的用法</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!