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

Question

我想在单页时将图形标题显示在图形底部，而在列表页时将其与图形并排显示。所以，我在图形标签中添加了“列表”或“单个”类。然后，在 css 文件中，我使用这两个代码来设置不同的样式:

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

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

Answer 1

如果我没理解错的话，你想为无形字幕设置样式。为此，您需要瞄准他们。另外，在向元素添加类时，应将类连接到元素，如下所示:

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;}

Example .尽管人们希望第二行中的值覆盖上一行，这不会发生，因为第一行比最后一行更具体。

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