Question

我似乎无法为图中的图像设置样式：

HTML：

<article>
    <p>

    <figure class="float-right">
        <img src="images/castle1.jpg">
        <figcaption>The castle by day</figcaption>
    </figure> 

    </p>
</article>

CSS：

article p figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}

您可以查看网站 here

Answer 1

p不能包含figure。 p元素中允许的唯一内容是phrasing content，figure未归类为。{/ p>

实际发生的事情是，您的figure元素是在p元素之后的兄弟姐妹中创建的，并默默关闭您的开放<p>标记（让结束标记悬空...... sort of）。由于您的选择器会在img内查找figure内的p，但实际的DOM不会反映这一点，因此无效。

如果您没有将p元素用于其他任何内容，则应将其删除，并将您的选择器更改为：

article figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}

Answer 2

只是一个小小的改变

.float-right img {
  height: 330px;
  width: 500px;
  float: right;
  margin: 10px 20px 20px 20px;
  background-color: green;
  border-radius: 4px;
}

Working Fiddle

在<figure> </figure>中设置样式<img/>

2 个答案: