Css html5，如何根据不同的情况设计不同的图形样式？

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

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

---

上述css对图形显示没有任何影响。只有figcaption对

.class figcaption

代码作出反应。如何更正它？

尝试删除点之前的空格：

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

---

如果我理解正确的话，您需要设置figcaptions的样式。要做到这一点，你需要瞄准他们。此外，在向元素添加类时，应将该类写入连接到元素的位置，如下所示：

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

这仅在

figcaption

是图形的直接子对象时有效（因此

）。如果不是，您可以使用以下选项：

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

---

如果您希望以CSS中的类作为元素的目标，请用一个点编写与该元素连接的类。像这样：

figure.list { }

此CSS可能会被另一个文件（例如JS或PHP文件）添加的样式或内联样式覆盖b）在第一个样式c）之后写入的样式覆盖a）该样式针对同一元素，但定义更全面/具体地说d）

。即使第二行中的值会覆盖前一行，这不会发生，因为第一行比最后一行更具体

---

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

这是级联样式表的基础。你真可耻。@iegik这不是因为某些东西对你来说是基本的，它对其他人来说是基本的。这是一个为每个人准备的问答网站，不管他或她对这个话题有什么知识，所以你不应该在这个问题上批评他们。好的，但是这个问答网站建议在提问之前做一点调查。我认为缩写词“CSS”本身说明，规则

。list figcaption

将以级联方式应用规则。顺便说一句，作者自己已经有了问题的答案figcaption中的figure类确实有意义，但我还想设计figcaption本身的样式。问题是图形本身不响应css类。我还需要设置图形的样式——在一个图形之前添加一个问号作为内容，而另一个图形之前没有任何内容。但结果是两位数的人得到了这个问题mark@Jenny很抱歉，我完全不明白你想说什么。例如，figure.list应该显示为block，而figure.single应该显示为float:left，以允许其他内容环绕。明白了！我在firebug中发现这个图形是由另一个插件设计的。谢谢

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