CSS3 구조적 의사 클래스 선택자의 영리한 사용

최근 외국 웹사이트에서 구조적 의사 클래스 선택자의 사용을 보고 매우 실용적이라고 생각하여 직접 시도해 보았습니다.

가장 기본적인 스타일입니다.

<span style="color: #008080;"> 1</span> <span style="color: #800000;">&lt;style type="text/css"&gt;
</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;">&lt;/style&gt;</span>

본문 내용:

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 2</span>  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 3</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第01个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 4</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第02个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 5</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第03个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 6</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第04个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 7</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第05个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 8</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第06个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 9</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第07个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">10</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第08个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">11</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第09个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">12</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第10个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">13</span>      <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>第11个<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">14</span>  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</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>     }

결과는 다음과 같이 표시됩니다.