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

因此，我正在做我母亲的小型企业网站，以节省她的钱，并在此过程中学习了很多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？谢谢

最佳答案

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


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


   图片链接{
      //样式在这里
    }



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


    #content a {
      //样式在这里
    }


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

    p> a {
      //样式在这里
    }


将样式添加到html时，通常最好考虑CSS的范围。请注意，您可以为一个元素多次声明样式。因此，您可以为HTML中的每个a元素创建CSS，并为特定范围内的a元素创建CSS。

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


Sitepoint
Quirksmode
Net Tuts
Smashing Magazine