如何告诉 CSS 在某些图像周围放置边框，而不是在其他图像周围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16013423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to tell CSS to put a border around some images, but not other?
提问by Kate
It was easy with HTML border properties, but they're gone now.
使用 HTML 边框属性很容易，但它们现在已经消失了。
All I'm finding is a lot of stuff about the wonderful things CSS does with borders. But how do I tell it to turn on the border for some images (pictures), but not others (icons)?
我所发现的只是很多关于 CSS 对边框所做的美妙事情的东西。但是我如何告诉它打开某些图像（图片）的边框，而不是其他（图标）的边框？
回答by RichieHindle
Mark the ones that should have a border with a class:
标记那些应该有一个类的边框：
<img class='picture' ...>
and then use CSS to add the border:
然后使用 CSS 添加边框：
.picture {
border: 1px solid green;
}
回答by Arkana
You could set a style for the images, as this:
您可以为图像设置样式，如下所示：
<img src="yourimage.jpg">
img {border:2px dotted blue;}
And set a unique class for the other images such icons, as this:
并为其他图像（例如图标）设置一个唯一的类，如下所示：
<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}
In any case you must make a difference between two images for the css identify each other.
在任何情况下，您都必须在两个图像之间进行区分，以便 css 相互识别。
回答by Guffa
You can add a style to a specific image tag, that would be the modern equivalent of using HTML attributes for styling:
您可以为特定的图像标签添加样式，这与使用 HTML 属性进行样式设置是现代等效的：
<img src="..." style="border:5px solid green" />
You can make a rule in a style sheet, and add a class to the image tag to use it:
您可以在样式表中制定规则，并在图像标签中添加一个类以使用它：
CSS:
CSS：
.Picture { border: 5px solid green; }
HTML:
HTML：
<img src="..." class="Picture" />
回答by Breezer
You could as it has already has been pointed to you, just add a class to the image, but on some occasions you can't change the content other then the css and/or maybe you feel like me at most times you find it a unnecessary waste of time to add classes to all the images your using. You might be better of with just using the correct selector. If there is a parent element with a class use that one instead. A sample of how that could look like is following:
您可以因为它已经指向您，只需在图像中添加一个类，但在某些情况下，您无法更改除 css 之外的内容和/或您可能在大多数时候都觉得它像我一样不必要地浪费时间为您使用的所有图像添加类。使用正确的选择器可能会更好。如果有一个带有类的父元素，请改用那个。示例如下：
HTML
HTML
<div class="content">
<img/>
</div>
CSS
CSS
div.content > img{
border:1px solid;
}
This is the optimal way of doing things since it doesn't add additional content to your content, which in return speeds up loading and user experience in return.
这是做事的最佳方式，因为它不会向您的内容添加额外的内容，反过来又会加快加载速度和用户体验。
回答by Bigood
Class selectors
类选择器
Use the class attribute in an element to assign the element to a named class. It is up to you what name you choose for the class. Multiple elements in a document can have the same class value.
使用元素中的 class 属性将元素分配给命名类。为班级选择什么名称取决于您。文档中的多个元素可以具有相同的类值。
In your style sheet, type a full stop (period) before the class name when you use it in a selector.
在您的样式表中，当您在选择器中使用类名时，在类名前键入一个句号（句点）。
(see RichieHindle's answer for an example)
（参见 RichieHindle 的回答示例）
ID selectors
ID选择器
Use the id attribute in an element to assign an ID to the element. It is up to you what name you choose for the ID. The ID name must be unique in the document.
使用元素中的 id 属性为元素分配 ID。为 ID 选择什么名称取决于您。ID 名称在文档中必须是唯一的。
In your stylesheet, type a number sign (hash) before the ID when you use it in a selector.
在您的样式表中，当您在选择器中使用 ID 时，在 ID 前键入一个数字符号（哈希）。
<div id="myStyledDiv">
#myStyledDiv{
border: 1px solid black;
}
Source : Webplatfroms.org(I recommend you to read all this article)
来源：Webplatfroms.org（我建议您阅读本文的所有内容）
