Question

我想我可能不理解＆＃34; ID＆＃34;和CSS中的类。在下面的示例中，我只是尝试自定义单个图像的显示方式。我试图只是为该图像创建一个自定义ID，然后在CSS中添加相应的标签。

我写的CSS不适用于图像。

另外，我可以通过<id>代替<p id>在CSS中创建自定义ID吗？

<!DOCTYPE html>
<head>
<style>
#mypicture {
  outline-color: red; 
  border-radius: 40px;
}
</style>
</head>

<body>
  <header>
    <p id="mypicture"><img src="assets/ben.jpg"></p>
    <h1>Bens's Blog</h1>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Best Poems</a></li>
      <li><a href="#">Worst Poems</a></li>
    </ul>
  </header>
</body>

Answer 1

您已将CSS应用于段落<p>标记。您希望这会尊重您当前的DOM：

#mypicture img {
  outline-color : red; 
  border-radius : 40px;
}

Answer 2

更好的规则集是：

#mypicture > img {
    outline-color: red; 
    border-radius: 40px;
}

mypicture是一个段落，您希望将样式应用于段落中的图像。

Answer 3

尝试将ID直接应用于图片：

<p><img src="assets/ben.jpg" id="mypicture"></p>

Answer 4

outline-style的默认值为none。因此，单独设置颜色不足以使轮廓显示。尝试设置outline-style: solid;。将在段落周围加上方形轮廓。

由于您还设置了border-radius，因此我想知道您的意图是否要围绕图像上的角落。如果是这样，您应该将样式应用于图像而不是段落。如果您希望对轮廓进行舍入，请使用border代替outline。

Answer 5

我会简单地（在第13行）省略段落块并将id放在图片声明中。

<img src="assets/ben.jpg" id="mypicture">

我是否正确使用CSS ID选择器？

5 个答案: