Question

我正在尝试使用css而不是选择器但没有取得多大成功。我正在尝试将属性应用于图像，除了.sponsors类中的属性。

img:not(.sponsors) {
width: initial;
max-width: 100%;
height: auto;
}

然而，它将属性应用于所有图像。赞助商类中的图像在表格中

<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>

任何帮助将不胜感激

Answer 1

如果您正在使用：

img:not(.sponsors) {
}

“赞助商”类必须是img标签。在您的示例中，它应该是：

<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0"> 
<tbody> 
<tr> 
<td style="width: 50%;"><img  class="sponsors" src="image1.jpg" /></td> 
<td style="width: 50%;"><img  class="sponsors" src="image2.jpg" /></td> 
</tr> 
</tbody> 
</table>

简单测试：https://jsfiddle.net/c31nq2dh/

尝试移动class属性并观察结果

Answer 2

为简单起见，我已将CSS规则更改为border: solid 5px red;，只是为了查看它的应用位置。

CSS :not()选择器适用于具有该类的元素。仅查看没有类sponsors的元素获取red colored border

img:not(.sponsors) {
    border: solid 5px red;
}

  <table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
  <tbody>
  <tr>
  <td style="width: 50%;"><img  class="sponsors" src="image1.jpg" /></td>
  <td style="width: 50%;"><img src="image2.jpg" /></td>
  </tr>
  </tbody>
  </table>

但是您的HTML在父元素上有类sponsors。添加您需要设置或重置图像所需的任何规则，如下所示：

.sponsors img {
    border: solid 5px red;
}

<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>

css没有选择器不工作，不知道为什么

2 个答案: