如何告诉CSS在一些图像周围放置边框，而不是其他图像

使用HTML边界属性很容易，但是现在没有了。

我所发现的是很多关于CSS对边框的奇妙作用的东西。但是，我如何告诉它打开边框的一些图像(图片)，而不是其他(图标)?

用class标记应该有边框的:

<img class='picture' ...>

，然后使用CSS添加边框:

.picture {
    border: 1px solid green;
}

您可以为这些图像设置一个样式，如下所示:

<img src="yourimage.jpg">
img {border:2px dotted blue;}

并为其他图像(如图标)设置一个惟一的类，如下所示:

<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}

在任何情况下，你必须使两个图像之间的差异css识别彼此

您可以为特定的图像标签添加样式，这相当于使用HTML属性进行样式化:

<img src="..." style="border:5px solid green" />

你可以在样式表中创建一个规则，并在image标签中添加一个类来使用它:

CSS:

.Picture { border: 5px solid green; }

HTML:

<img src="..." class="Picture" />

你可以，因为它已经指向你，只是添加一个类的图像，但在某些情况下，你不能改变的内容，除了css和/或者你觉得像我一样，在大多数时候，你发现这是一个不必要的浪费时间添加类到所有的图像你使用。使用正确的选择器可能会更好。如果有父元素带有类，则使用父元素。下面是一个示例:

<div class="content">
<img/>
</div>

CSS

div.content > img{ border:1px solid; }
这是做事情的最佳方式，因为它不会添加额外的内容到您的内容，这反过来又加快了加载速度和用户体验。

类选择器
在元素中使用class属性将元素分配给一个命名的类。给这个班取什么名字由你决定。一个文档中的多个元素可以有相同的类值。

在样式表中，当在选择器中使用类名时，在类名前键入句号(句点)。

(示例见richehindle的回答)

ID选择器
在元素中使用id属性为元素分配一个id。选择什么名称作为ID由您决定。ID名在文档中必须是唯一的。

在样式表中，当在选择器中使用ID时，在ID前面键入一个数字符号(哈希)。

<div id="myStyledDiv"> #myStyledDiv{ border: 1px solid black; }
来源:Webplatfroms.org(我建议你阅读这篇文章)

类选择器

相关内容

最新更新

热门标签：