我可以使用图像创建选择器吗？答案

【问题标题】：Can I create a selector with an image?我可以使用图像创建选择器吗？
【发布时间】：2020-05-21 07:25:06
【问题描述】：

我现在正在学习基础知识。我刚刚了解了选择器。

例如，

.DivClass{ 
    background-color: dodgerblue; 
    width: 160px;
    height: 220px;
    padding: 40px;
    border: 10px dashed black;
    margin: 50px;
}

在哪里

div class="DivClass"

我可以对图像做类似的事情吗？我只知道

img src="www.link"

使用谷歌，我发现

 img {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
      width: 150px;
    }

但这只有在你只有一张图片的情况下才有效，对吧？您如何将图像命名为类或 ID？

另外，使用 ./pre，你如何在里面放置小于/大于符号？如果我尝试，它只会显示为空白。

【问题讨论】：

您在示例中写的内容没有任何意义。 <pre> 标签有什么用？
他们只是把代码放在这篇文章里，让它看起来像代码。除了它不会让我使用小于/大于内部的标志。我该如何做一个代码 sn-p？
您可以将代码缩进四个空格，或者选择输入文本框上方的代码降价。这是降价，您不能使用 HTML 格式化帖子。

标签： css image css-selectors

【解决方案1】：

用 CSS 讨论 HTML 是很正常的创建类并将其用于 img 标签。示例：

.img-container {
   width: 100%;
   heigth: 100%
}

<img class="img-container" src="img_car.jpg" alt="Car">

我强烈建议您了解有关 CSS 的更多信息。 W3 有关于网络内容的完整文档：https://www.w3schools.com/w3css/

此外，当您想将 css 直接添加到 HTML 文件中时，您必须使用样式标签。看看我在下面的 sn-p 中做的例子：

<body>
<style>
.DivClass{ 
    background-color: dodgerblue; 
    width: 160px;
    height: 220px;
    padding: 40px;
    border: 10px dashed black;
    margin: 50px;
  }
  
.image-container {
  width: 50px;
  heigth: 50px;
  background-color: red;
  }
</style>
<div class="DivClass"></div>
<img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" class="image-container" >
</body>

回答您的问题，当您将 CSS 应用于标签名称时

img {
 **any style here**
}

意味着您项目中的所有 img 标签都将获得您在选择器 img {} 中设置的样式。

当您创建一个具体选择器时，例如 .image-container {}，意味着只有接收到此类的标签才能获取他内部的样式。示例：

<img class="image-container" src="..." >

<div class="image-container" > blablabla </div>

只有当您想为一个且只有一个特定元素设置样式时才使用 ID 选择器，示例：

#testing-id {
   color: red
}

<p id="testing-id"> blablalba </p>

我希望解释有所帮助。

【讨论】：

注意：<img> 标签不使用也不需要结束斜杠，在 HTML 中也从来没有。
我一直在使用style标签。有没有办法在这里发布我的整个代码而不会破坏东西？你是怎么输入代码sn-p的？基本上我只是想看看你是否可以添加多个图像（就像你可以有多个段落一样）并为每个图像设置不同的设置。
我想通了！！只能多看几眼了，哈哈。现在我知道如何为图像创建类了:)
不错！抱歉耽搁了，但是正如我解释的那样，是的很简单。您可以根据需要创建任何类，然后将其应用到您想要的任何元素中。所以，如果问题解决了，别忘了关闭问题。要添加代码 sn-p 或仅添加一些代码部分，您只需在创建问题时注意顶部栏中的 textarea 选项，因为您会发现所有这些选项都可以插入到您的问题中。跨度>
非常感谢您的帮助！