CSS class 具有嵌套元素

Question

我想仅在特定 class 中将 table 元素显示为块，而不是在 table 的每个子元素上使用 class。

我尝试过的：

@media only screen and (max-width: 650px)
{
  .contactform 
  {
    table, thead, tbody, th, td, tr {
      display: block;
   }
}

<table class="contactform">
  <tr>
    <td>
      <label> First Name </label>
    </td>
    <td>
      <label> Last Name </label>
    </td>
  </tr>
  <tr>
    <td>
      <label> E-Mail </label>
    </td>
    <td>
      <label> Phone </label>
    </td>
  </tr>
</table>

Answer 1

为了避免在 table 中的每个 'sub-element' 上使用 class，您可以使用 :is() 伪 class 来定位您的某些后代给定 class.

一个问题是默认情况下浏览器样式 table 元素...作为 table。所以你可能不得不改变你的媒体查询

@media only screen and (min-width: 650px) {
  .contactform,
  .contactform :is(table, thead, tbody, th, td, tr) {
    display: block;
  }
}

<table class="contactform">
  <tr>
    <td>
      <label> First Name </label>
    </td>
    <td>
      <label> Last Name </label>
    </td>
  </tr>
  <tr>
    <td>
      <label> E-Mail </label>
    </td>
    <td>
      <label> Phone </label>
    </td>
  </tr>
</table>

或者最好 browser compatibility:

@media only screen and (min-width: 650px) {
  .contactform,
  .contactform table,
  .contactform thead,
  .contactform tbody,
  .contactform th,
  .contactform td,
  .contactform tr {
    display: block;
  }
}

<table class="contactform">
  <tr>
    <td>
      <label> First Name </label>
    </td>
    <td>
      <label> Last Name </label>
    </td>
  </tr>
  <tr>
    <td>
      <label> E-Mail </label>
    </td>
    <td>
      <label> Phone </label>
    </td>
  </tr>
</table>

CSS class 具有嵌套元素

CSS class with nested elements

html

css

class

responsive