Question

所以，我正在做我妈妈的小企业网站，以节省她的钱，并在这个过程中学习相当多的CSS。我有一个小问题，我正在创建一个链接到2个不同页面的图库页面，我希望http://area25dallas.com/s/gallery.htm的文本位于每个图像旁边（陈列室和舞台）（我也知道图像）是相同的，等待更多的妈妈）。我希望这些可以放在首位，但是当我向控制图像翻转效果的后续CSS添加a{}时，它会搞砸网站上的所有其他链接。

 .imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
 }

 a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
    box-shadow: 1px 1px 10px #999;
 }

有没有办法让a{}和a:hover{}特定于这些链接和图片而不会弄乱网站的整个CSS？感谢

Answer 1

要为特定元素创建CSS，您可以采取以下几种方法：

为元素创建特定的类。 <a class="image-link"></a>

   a.image-link{
      //styles go here
    }

您可以参考链接的唯一上下文。例如，如果它位于ID为content的div中。 <div id="content"><a></a></div>

    #content a{
      //styles go here
    }

或者它是唯一可以直接位于a元素p内的<p><a></a></p>

    p > a{
      //styles go here
    }

在为html添加样式时，通常考虑CSS的范围。请注意，您可以为元素多次声明样式。因此，您可以为HTML和CSS中的每个a元素为特定范围内的a元素制作CSS。

有关CSS选择器的更多信息：

Answer 2

您是否尝试过此代码？

img.imagedropshadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
    box-shadow: 1px 1px 10px #999;
 }

Answer 3

#content .imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
 }

#content  a{
}

#content  a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
    box-shadow: 1px 1px 10px #999;
 }

理想情况下，您应该使用类或ID在图像周围添加div，并使用该ID /类值选择所需的锚点（{}）标记。我刚刚选择了容器DIV的ID

Answer 4

请记住，当你使你的选择器非常具体时，例如#Content .myDiv a.link而不是#Content a.link，更具体的否决了那些不太具体的。

只是提示

使用不同的CSS类对齐图像链接顶部的链接文本

4 个答案: