CSS에서 하위 요소를 어떻게 그룹화할 수 있나요?

하위 항목 그룹화를 위한 파악하기 어려운 CSS 선택기

CSS는 스타일 지정 요소에 대한 강력한 옵션을 제공하지만 주목할만한 부재 중 하나는 하위 항목을 쉽게 그룹화하는 기능입니다. . 이러한 제한은 열 머리글과 셀 모두에 동일한 스타일을 지정하려면 번거로운 선택기가 필요한 HTML 테이블과 같은 복잡한 요소의 스타일을 지정할 때 더욱 분명해집니다.

하위 스타일 지정의 딜레마

다음 표 예를 살펴보세요.

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

단일 선택기로 제목과 셀의 스타일을 모두 지정하려면 일반적으로 다음을 사용합니다.

<code class="css">#myTable th, #myTable td {}</code>

그러나 이 접근 방식은 다음과 같은 경우 장황하고 지루합니다. 많은 수의 요소를 처리합니다.

(th, td) 선택기: 놓친 기회

더 직관적인 구문은 다음과 유사한 그룹화 선택기를 사용하는 것입니다. :

<code class="css">#myTable (th, td) {}</code>

안타깝게도 이러한 구문은 CSS에 존재하지 않습니다.

2008년 이전 제안의 무용성

알고 보니 , 하위 그룹 선택기의 부족은 오랫동안 문제였습니다. 2008년에 제안된 :any() 의사 클래스와 같은 초기 도입 시도는 관심을 끌지 못했습니다.

최근 개발 및 희미한 희망

그러나 선택자 레벨 4 작업 초안에서는 그룹화 가상 클래스인 :matches() 개념을 다시 도입했습니다. 이 제안은 가능성을 보여주지만 브라우저 지원은 아직 멀었습니다.

대체 솔루션

그동안 하위 그룹화에 대한 몇 가지 해결 방법이 있습니다.

• * 선택기 사용:

  <code class="css">#myTable tr > * {}</code>

  (이는 tr 요소에 td 또는 th 요소만 포함되고 다른 요소는 포함되지 않는다고 가정함)

• 최대 성능을 위해 장황한 th, td 접근 방식을 고수

결론

CSS에서 하위 그룹 선택자가 없다는 것은 수년 동안 지속적인 문제였습니다. . 최근 제안이 희미한 희망을 제시하고 있지만 광범위한 브라우저 지원은 여전히 ​​어렵습니다. 그때까지 개발자는 대체 접근 방식에 의존하거나 기존 th, td 선택기의 장황함을 포기해야 합니다.

위 내용은 CSS에서 하위 요소를 어떻게 그룹화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!