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>

다음과 같은 더 간결한 구문이 없는 이유는 무엇입니까? :

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

솔루션의 진화

처음에는 :any() 의사 클래스가 제안된 2008년까지 유용한 구문에 대한 제안이 없었습니다. . Mozilla는 이를 2010년에 :-moz-any()로 구현했고, 2011년에는 WebKit의 :-webkit-any()를 구현했습니다.

그러나 두 접두사를 동시에 사용하면 규칙 집합이 복제되어 목적이 무산되었습니다. 결과적으로 이러한 접두사가 붙은 선택기는 이제 비현실적인 것으로 간주됩니다.

이제 선택기 레벨 4 작업 초안에는 원래 :any()를 기반으로 하지만 잠재적으로 개선된 :matches()에 대한 제안이 포함되어 있습니다. 그러나 브라우저 지원에는 다소 시간이 걸릴 것으로 예상됩니다.

해결 방법

th 및 td 요소의 스타일을 구체적으로 지정하려면 tr 요소를 가정하고 *를 대신 사용할 수 있습니다. 셀 요소만 포함:

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

또는 성능상의 이유로 더 긴 기존 방법을 선호할 수도 있습니다.

위 내용은 CSS 선택기에서 하위 항목을 그룹화할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!