Question

我有HTML代码加载图像网格。图像周围有一个盒子阴影。每个图像在网格上逐个加载，但它们都使用相同的样式表。我想让每个盒子阴影成为图像的不同颜色。这可能吗？

我尝试通过使每个替代图像的阴影成为不同的颜色来测试这种方法，但它仅使用为所有图像加载的最后一个图像的颜色。以下是我测试它的方法：

//i is defined outside this
if($i == 0){
    //I am using PHP to print out the HTML
    Echo "<style> ul.rig li { box-shadow: 0 0 10px #2de61c; }</style>";
    $i++;
}else if($i == 1){
    Echo "<style> ul.rig li { box-shadow: 0 0 10px #ed1515; }</style>";
    $i--;
}

无论i等于最后加载的图像，图像的其余阴影都将具有该颜色。是否可以交替/拥有这样的不同颜色？

Answer 1

只需使用nth-child CSS。

ul.rig li:nth-child(odd) { box-shadow: 0 0 10px #2de61c; }
ul.rig li:nth-child(even) { box-shadow: 0 0 10px #ed1515; }

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

为什么不使用类似的东西：

 //i is defined outside this
 if($i == 0){
     //I am using PHP to print out the HTML
     Echo "<htmlselector class="1"></htmlselector>";
     $i++;
 }else if($i == 1){
     Echo "<htmlselector class="1x"</htmlselector>";
     $i--;
 }

这样你可以使用CSS并相应地设置它们。

Answer 3

您可以将图像与特定类一起加载到该网格中。然后给每个类别一个首选的样式。因为你现在所做的只是重写css。

在多个地方加载HTML后我可以更改CSS样式吗？

3 个答案: