如果特定元素的父元素具有特定的类，则如何覆盖它的CSS样式

Question

.webgrid-table td, th {
    border: 1px solid #98bf21;
    padding: 3px 7px 2px;
}

上面的样式正在应用于所有td，但我想不想将上述样式应用于tr中的td，其中有一个名为webgrid-footer的类

所以我试图以这种方式排除具有类webgrid-footer的tr内的td

.webgrid-footer td {
     padding: 0px,0px,0px;
}

但它不起作用。这里是jsfiddle https://jsfiddle.net/tridip/pta7Ln59/

这里的图像就像我想要的那样

只看到寻呼机有一个我想要修剪的空间。所以建议我在css中改变什么。感谢

Answer 1

您的CSS无效，因为您在像素值之间有逗号。将您的CSS更改为不使用逗号

vendor/magento/module-catalog/i18n/de_DE.csv

Answer 2

您可以使用:not() pseudo class取消所有具有类td的{​​{1}}元素。从那里，您可以选择后代th / tr:not(.webgrid-footer) td, tr:not(.webgrid-footer) th { border: 1px solid #98BF21; padding: 3px 7px 2px; } 元素：

Updated Example

tr.webgrid-footer td { padding: 0; }

Answer 3

再次牟！您只得到填充错误的语法：https://jsfiddle.net/pta7Ln59/2/

.webgrid-footer td {
     padding: 0;
}

逗号不正常：padding: 0px,0px,0px;（padding: 0px 0px 0px;可以）

要删除剩余空格，请添加以下规则：https://jsfiddle.net/pta7Ln59/3/

.webgrid-footer .paginate.pag5 {
    margin: 0;
}

（班级.paginate.pag5有一个保证金，所以你必须将其删除）

Answer 4

你需要更具体

尝试

.webgrid-table .webgrid-footer td { padding: 0; }

或

{{1}}

Answer 5

这里有一些问题：

• 您的规则不比.webgrid-table td, th
多specific
• 你没有正确的语法（没有逗号）

这是一个固定的：

.webgrid-table .webgrid-footer td {
     padding: 0 0 0;
}

附注：

• 一个主要的良好做法是要小心确保规则具有足够大的特异性，即使它一开始没有似乎重要，或者你已经拥有维护代码时出现随机错误，您最终会将!important放入代码中（这是一个明确的红旗）
• 您可能不希望.webgrid-table td, th定位所有 th元素，但.webgrid-table td, .webgrid-table th。
• 我想您可能还需要margin:0元素上的ul。