css - html5，如何为不同的情况设置不同的图形样式？

Question

我想在单页上显示图形底部的 figcaption，并在列表页上与图形并排显示。所以，我在图形标签中添加了“list”或“single”类。然后，在 css 文件中，我使用这 2 个代码对它们进行不同的样式设置：

figure .list{....}
figure .single{...}

上面的css对图形显示没有任何影响。只有 figcaption 对.class figcaption代码做出反应。我该如何纠正？

Answer 1

如果我理解正确，您想要设置 figcaptions 的样式。为此，您需要针对它们。此外，当向元素添加类时，应将类写入到元素，如下所示：

figure.list > figcaption { }
figure.single > figcaption { }

这仅适用figcaption于图形的直接子代（因此>）。如果不是，你可以使用这个：

figure.list figcaption { }
figure.single figcaption { }

---

如果您希望使用 CSS 中的类来定位元素，请编写使用点连接到元素的类。像这样：

figure.list { }

此 CSS 可能被a)由另一个文件（例如 JS 或 PHP 文件）添加的样式或内联样式b)在第一个样式之后编写的样式c)针对相同元素的样式但被更彻底/具体地定义d) !important。

body figure.list {float: left;}
figure.list {float: none;}

例子。即使人们期望第二行中的值会覆盖前一行，但这不会发生，因为第一行比最后一行更具体。

如果您似乎无法找到样式显示不正确的原因，请尝试使用浏览器的开发人员工具(F12)。Chrome 的工具非常好，但我不太喜欢 Firefox 的。但是，您可以使用Firebug 插件。

Answer 2

尝试删除点之前的空格：

figure.list{....}
figure.single{...}