최근 외국 웹사이트에서 구조적 의사 클래스 선택자의 사용을 보고 매우 실용적이라고 생각하여 직접 시도해 보았습니다.
가장 기본적인 스타일입니다.
<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style type="text/css"> </span><span style="color: #008080;"> 2</span> <span style="color: #800000;"> li</span>{ <span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> list-style-type</span>:<span style="color: #0000ff;"> none</span>; <span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; <span style="color: #008080;"> 5</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 60px</span>; <span style="color: #008080;"> 6</span> <span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 60px</span>; <span style="color: #008080;"> 7</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #979698</span>; <span style="color: #008080;"> 8</span> <span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 10px</span>; <span style="color: #008080;"> 9</span> <span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;"> center</span>; <span style="color: #008080;">10</span> <span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 60px</span>; <span style="color: #008080;">11</span> <span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>; <span style="color: #008080;">13</span> } <span style="color: #008080;">14</span> <span style="color: #800000;"></style></span>
본문 내용:
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第01个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第02个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第03个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第04个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第05个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第06个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第07个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第08个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第09个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第10个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第11个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">15</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
첫 번째는 가장 기본적인 구조적 의사 클래스 선택기의 사용법입니다.
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(8)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">4</span> }
결과는 다음과 같이 표시됩니다.
사용:nth-child(6) 이상의 li 태그 요소와 동일한 nth-child(n+6):
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+6)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">4</span> }
결과는 다음과 같이 표시됩니다.
같은 방식으로:nth-child(-n+6)를 사용합니다. 이는:nth-child(6) 및 다음 li 태그 요소와 동일합니다.
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(-n+6)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">4</span> }
결과는 다음과 같이 표시됩니다.
위의 원칙을 바탕으로 몇 가지 고급 원칙을 생각해낼 수 있습니다.
예를 들어, nth-child(n+4):nth-child(-n+8)를 사용하여 :nth-child(4) 이상 및 :nth-child(8)의 li 태그 요소를 얻을 수 있습니다. ) 이하:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+4):nth-child(-n+8)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">3</span> }
결과는 다음과 같이 표시됩니다.
다음을 사용할 수도 있습니다:nth-child(n+2):nth-child(odd):nth-child(-n+8) to get:nth-child(n+2) to:nth-child( -n +8) 다음 사이의 단일 li 태그 요소:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+2):nth-child(odd):nth-child(-n+8)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">3</span> }
결과는 다음과 같이 표시됩니다.
마지막으로 nth-child(3n+1)를 사용하여 숫자 1, 4, 7, 10이 포함된 짝수 li 태그 요소를 얻을 수도 있습니다.
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(3n+1):nth-child(even)</span>{ <span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>; <span style="color: #008080;">3</span> }
결과는 다음과 같이 표시됩니다.