CSS 하위 선택자

이번에는 CSS 하위 선택자를 가져오겠습니다. CSS 하위 선택자 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

하위 항목 선택기는 자식 및 손자 등을 포함하여 태그의 모든 자손을 선택하는 데 사용되는 반면, 자손 선택기는 지정된 부모의 자손 태그(지정된 태그 요소의 1세대 자식 요소)만 선택합니다.

하위 항목 선택기는 추가 기호(꺾쇠 괄호 >)를 사용하여 두 요소 간의 관계를 나타냅니다.

예: body>h1은 태그에서 1세대

태그를 모두 선택합니다.

HTML 태그

HTML 코드

<h1>body里面的h1标题</h1>
<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>
<h2>body里面的h2标题</h2>
<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

의 관계 다이어그램 위의 구조를 이해한 후 다음 코드를 시도해 볼 수 있습니다.

CSS 코드

body>h2 {
    color: orange;
}

위 HTML 내부 코드에는 총 2개의

태그가 있지만 에는

의 하위 항목이 하나만 있고 다른

는

안에 있으므로 위의 CSS 코드는

다음은 더 흥미로운 하위 선택기입니다

: first-child

첫 번째 하위 태그를 선택하세요.

CSS 코드

h2:first-child {
    color: orange;
}

이 선택기의 기능은 다음과 같습니다. 먼저 웹 페이지에서 모든

태그를 찾고,

태그를 통해 상위 요소를 찾은 다음

; 태그가 상위 요소에 있는지 여부.

여기서 의 첫 번째 태그는

이므로 의 하위 요소인

는 스타일의 영향을 받지 않습니다.

의

는

의 첫 번째 하위 요소이므로

:last-child

이 선택기는 :first-child 선택기와 유사하지만 요소의 마지막 자식을 선택합니다.

CSS 코드

li:last-child {
    font-size: 2em;
}

"Small List C"와 "List 3 (with link)"의 글꼴 크기가 커진 것을 확인할 수 있습니다. 왜냐하면 이 두 항목이 마지막으로 지정된 항목이기 때문입니다.

:only-child

는 요소의 유일한 자식을 선택합니다.

HTML code

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

CSS code

p:only-child {
    color: orange;
}

위 스타일은 첫 번째

의

요소에만 적용됩니다. 두 번째

요소에는 요소도 있으므로 두 번째

요소는 위 스타일의 영향을 받지 않습니다.

이 선택기는 이해하기 어렵습니다. 이 선택기로 정의된 스타일은 지정된 태그가 다른 태그의 유일한 자손인 경우에만 유효합니다. 즉, 자손에 지정된 태그가 하나만 있으면 충분하지 않습니다. 지정된 태그에 다른 형제 태그가 있으면 이 선택기로 정의된 스타일이 유효하지 않습니다.

:nth-child

이 선택기는 사용하기가 더 복잡하지만 특히 유용합니다.

이 선택기는 두 항목으로 구분된 테이블의 행, 두 항목으로 구분된 목록의 항목 또는 다른 숫자로 구분된 하위 요소에 대한 스타일을 쉽게 정의할 수 있습니다.

이 선택기에는 어떤 하위 항목이 선택되는지 결정하는 값이 필요합니다.

가장 간단한 값은 키워드, 즉 홀수와 짝수입니다.

1. odd用于选取奇数子代元素。

2. even用于选取偶数子代元素。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

第一个子元素的下标是 1。

需要注意的是，如果在第一个

之前还有其他元素，那第一个

的下标就不是1了。
比如

HTML代码

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

这时的效果是

li:nth-child(odd) 的意思是找到

元素的父元素，通过父元素来检测每一个

的下标的奇偶。

因为

的第一个元素是，第二个元素才是
• 。也就是说，第一个
• 的下标是2，所以第一个下标赋的样式是绿色的背景。

  使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。

  可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个

• 的背景色改成橙色。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
  </ul>

  CSS代码

  li:nth-child(4) {
      background: orange;
  }

  

  同样的，这里的 li:nth-child(4) 的意思，是找到

• 标签的父元素，然后查找父元素的第4个子元素。

  如果HTML代码是下面这样，CSS代码不变的情况下。

  HTML代码

  <ul>
      <a href="#">a</a>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
  </ul>

  效果就会变成这样：

  

  会选中第3个

• 。因为第3个
• 在其父元素里面是排第4的。

  如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
  </ul>

  CSS代码

  li:nth-child(3n) {
      background: orange;
  }

  

  每当遇到3的整数倍的那个元素，就会应用规定的样式。

  如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
  </ul>

  CSS代码

  li:nth-child(3n+2) {
      background: orange;
  }

  如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。

  CSS代码

  li:nth-child(3n+5) {
      background: orange;
  }

  

  如果想反向遍历，n前面的倍数就要修改成负数。

  CSS代码

  li:nth-child(-n+3) {
      background: orange;
  }

  

  意思是：从列表的第三个条目算起，选取在此之前的每个条目。

  如果想从第4个元素开始，往下选取所有元素。可以这样写：

  CSS代码

  li:nth-child(n+4) {
      background: orange;
  }

  

  以下是子代选择符总览表

  

  

  

  

  

  

  

  

  

  

  

  

  이 방법을 숙지하신 것 같아요 이 기사의 경우, 더 흥미로운 정보를 원하시면 비용을 지불하세요 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

  추천 도서:

  CSS의 위치 지정 속성에 대한 자세한 설명
  

  css3에서 얇은 선을 1픽셀보다 작게 만드는 방법
  

  위 내용은 CSS 하위 선택자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!