仅在具有特定类的表的元素上的 CSS 样式答案

【问题标题】：CSS style on an element only of a table with a specific class仅在具有特定类的表的元素上的 CSS 样式
【发布时间】：2021-05-04 13:23:12
【问题描述】：

我从来都不擅长 CSS，现在已经过了午夜，如果这个问题太简单了，请见谅。

我的桌子是这样的：

使用这个 CSS：

.zebra_stripe_table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

tbody.zebra_stripe_table 
{
  border-collapse: collapse;
  border: 1px solid #ddd;
} 

tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table {
  text-align: center;
  /* padding: 16px; */
  border: 1px solid #ddd;
}

.zebra_stripe_table tr:nth-child(even) {
  background-color: #f2f2f2;
}

我希望在桌子上有垂直的列，像这样：

我做到了

.zebra_stripe_table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

  .zebra_stripe_table tbody
{
  border-collapse: collapse;
  border: 1px solid ddd;
}

.zebra_stripe_table tr, th, td {
  text-align: center;
  /* padding: 16px; */
  border: 1px solid #ddd;
}

.zebra_stripe_table tr:nth-child(even) {
  background-color: #f2f2f2;
}

差异正在改变

tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table

到

.zebra_stripe_table tr, th, td

但是，这会将单元格边框添加到 AngularJS 项目中唯一的另一个表（它没有类“zebra_stripe_table”）。

所以，我想第一个语法是正确的，只对 zebra_stripe_table 类的 tr、th 和 td 应用样式。

问题，我如何获得那些垂直条纹？

【问题讨论】：

标签： css html-table css-selectors

【解决方案1】：

对于单元格内的居中对齐，请更改此选择器

.zebra_stripe_table tr, th, td { ... }

到这里：

.zebra_stripe_table th, .zebra_stripe_table td {... }

（您不需要在此处包含tr，但您需要将.zebra_stripe_table 作为* th 和td 的父级）

关于行的交替背景颜色，更改您的最后一个 CSS 规则

.zebra_stripe_table tr:nth-child(even) { background-color: #f2f2f2; }

到

.zebra_stripe_table tr:nth-child(even) td { background-color: #f2f2f2; }

（获取背景的是单元格，而不是行）

【讨论】：