html5，如何为不同的情况下不同的样式图

Question

我想在单个页面时将figcaption显示在图的底部，并在列表页面时与图并排显示。因此，我在图标签中添加了"list"或"single"类。然后，在css文件中，我使用这两个代码来设置它们的样式:

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

以上css对图形显示没有任何影响。只有图片标题对.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;}

的例子。尽管人们期望第二行的值覆盖前一行，但这种情况不会发生，因为第一行比最后一行更具体。

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

Answer 2

尝试删除点前的空格:

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