如何忽略网站某些部分的 CSS img 样式？

Posted 2023-05-09

【中文标题】如何忽略网站某些部分的 CSS img 样式？

【英文标题】：How to ignore CSS img styling for certain sections of the website?

【发布时间】：2014-10-28 17:43:44

【问题描述】：

我需要一些帮助，最好使用 jquery sn-p。我们正在寻找的 sn-p 将允许我们忽略同一页面中的某些 css 类。

EX) 我们有 Header 标志 img，我们想忽略 img 的 css 样式，如何实现？

CSS

img 
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);

我们想忽略第一个 img 的 css 样式，而保留第二个 img 的样式，这是最好的方法吗？

【问题讨论】：

使用类 - <img /> <img class="style"> | .style /*style*/ ...

使用 CSS 选择器，例如：.nav > img , .header > .left > img 等。它将设置应用 CSS 的范围。

【参考方案1】：

你可以这样做：-

img:not(:first-child)
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);

Demo

【讨论】：

您可能希望如上所述向标题徽标图像添加一个 id 和类，而不是使用 :first-child ，因为出于某种原因他希望 jquery sn-p 执行此操作，所以我假设出于某种原因，他想在徽标上添加/删除 css。所以你可以使用类似 $('#header_logo').addClass('.header_logo);然后将上面的 css 更改为 img:not(.header_logo)

@naw103 他没有提供 html。我刚刚给了他一个想法，他可以如何将 css 应用于图像 exept 第一个图像，不管它有没有 id。

他可以根据自己的要求使用选择器

【参考方案2】：

为您的标题徽标图像提供一个 id 或类，并使用 css 的 :not 选择器。喜欢

:not(selector) 
    css declarations;

【参考方案3】：

您的 CSS 声明 <img> 的所有实例都将应用该样式。

您可以使用类选择器而不是通用选择器来设置样式，以避免包含第一张图片。