Question

我在页面上使用以下代码：

<div id="itemstable" class="item_type1">
...other divs here...
</div>

在我的CSS文件中，我有这段代码：

.item_type1 div {
    background-image: url(images/type1.giff);
}

问题是有很多不同的项目类型，所以我需要在我的CSS文件中有很多行。我想知道如何将background-image: url(images/type1.giff);样式应用于嵌套的div而不将其分配给每个div。例如。我想更改“itemstable”div的代码，以便它将css规则应用于嵌套的div。

这可能吗？

编辑：我正在寻找类似的东西：

<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>

Answer 1

（如果我正确理解了这个问题：）

考虑使用不同的ID /类方案。我不知道你的结构的进一步细节，但id="itemstable" class="item_type1"对我来说似乎有些多余。 itemstable可以item_type1以外的其他内容吗？尝试应用更多通用类名，并保留ID的特定情况。

如果失败，您可以添加另一个负责添加背景图片的类：class="item_type1 item_types"。

修改

因为看起来纯粹的质量是主要问题（不应用标题所暗示的样式），所以最好在页眉中动态插入样式。有点像：

<head> ... <style type="text/css" media="screen"> <?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; } </style> </head>

内联样式只能直接应用于元素，而不能应用于其中一个子元素。即：

<div style="background: ...;">

背景仅适用于这一个div 您不能在内联样式中使用选择器，如：

<div style="div { background: ...; }">

Answer 2

我认为包含更多的HTML会让您的问题更容易理解。

您当然可以在复合选择器中包含多个规则：

.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
  background-image: url(xyz.gif);
}

但是，由于您是动态地从数据库中提取图像，因此您需要将它们包含在动态代码中 - 在div本身中，或者如上所述动态创建CSS：

<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>

将css应用于嵌套的div

2 个答案: