Question

在本文中：CSS targeting specific images，Nils Munch解释了如何通过CSS“挂钩”特定图像，这里是一个例子：

img[width="400"]{
float:left;
}

它对我来说非常合适，我也迷上了课程：

img.forum-icon {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

但是现在我发现一个图像'un-hookable'因为没有指定大小，没有一个类......我不应该像这样挂钩主题上的所有图像：

.img {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

有一种方法可以用例如编程'和'函数来挂钩？例如：

If is 400px and not class x then

或者更好地指定类别或尺寸较小的所有图像：

.img (but not x class or not x width){
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

编辑：谢谢你们，我觉得这很有用：

img:not([src="http://www.love4wellness.it/wp-content/uploads/2014/03/logo.png"]) {
    background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

如果有办法将多个图像添加到我的过滤器，我需要关闭此请求，例如：

img:not([src=image1], [src=image2], [src=image3]) {
    background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

我尝试了几种方法，但没有工作......

其他，不幸的是我不得不在过滤器中添加太多图片（如果可以添加多个）也会添加到缩略图中......对于商店在线网站来说真的很有用..

我的新问题应该更简单：

我想只自定义在BuddyPress页面中发布的图片...这是示例页面：http://www.love4wellness.it/groups/benvenuto/

如你所见，第一个帖子的img没有边框，并且没有像类和/或自定义css文件那样的钩子来编辑... 有办法让它可以挂钩吗？

非常感谢你的耐心......

Answer 1

解决方案1 ：

保持简单。假设您要为匿名图像添加红色边框，您可以写：

/* add red border to all images */
img { border: 1px solid red; }
/* remove border if image has class or width attribute */
img[class], img[width] { border: none; }

解决方案2：

使用CSS3 :not伪类：

/* if is 400px and not class x then */
img[width="400"]:not(.someclass) { }
/* not x class or not x width */
img:not(.someclass), img:not([width="400"]) { }

注意：

:not选择器接受simple selector，因此:not(.foo, .bar)将无效，:not(.foo):not(.bar)将无效。
如果要排除的图片在src属性中有一些共同点，您可以定位（或排除它们），如[src*="/some/path/"]。

Answer 2

如果按顺序组织声明，则只有在满足条件时才会覆盖/应用声明

// standard img with no class of width hook
.img {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

// applied to the above styles, to images with this hook.
img[width="400"]{
float:left;
}

// applied to all the above styles, to images with this hook.
img.forum-icon {
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

Answer 3

解决：

我直接挂了容器：

.activity-content img{
background: #ffffff;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
}

感谢所有

在style.css中使用“AND”和“OR”函数进行CSS定位

3 个答案: