Link-Text oben auf Bild-Link mit verschiedenen CSS-Klassen ausrichten

Question

Also mache ich meine Mütter kleine Business-Website, um ihr Geld zu sparen und dabei einiges an CSS zu lernen. Ich habe jedoch ein kleines Problem, ich mache eine Galerie-Seite, die auf 2 verschiedene Seiten verlinkt, ich möchte den Text unter http://area25dallas.com/s/gallery.htm, der neben jedem Bild sitzt (Showroom und Staging) (auch ich weiß, dass die Bilder gleich sind, warten auf mehr von der Mama). Ich möchte, dass diese an der Spitze sind, aber wenn ich eine a{} zu den folgenden CSS hinzufüge, die den Bild-Rollovereffekt steuern, versaut er alle meine anderen Verbindungen auf der Web site.

.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; 
} 

Gibt es eine Weise, die ich eine a{} und a:hover{} spezifisch für diese Links und Bilder ohne Unordnung die gesamte CSS der Website nach oben machen? Danke

Answer 1

Um CSS für ein bestimmtes Element zu erstellen gibt es mehrere Ansätze, die Sie ergreifen können:

• eine bestimmte Klasse für das Element erstellen. <a class="image-link"></a>

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

• Sie können den einzigartigen Kontext des Link verweisen. Zum Beispiel, wenn es sich innerhalb eines div mit ID content befindet. <div id="content"><a></a></div>

 
    #content a{ 
     //styles go here 
    } 

oder wenn es sich um die einzige a dass <p><a></a></p> direkt in einem p Element sein kann

 
    p > a{ 
     //styles go here 
    } 

Wenn Stile Ihre HTML-Zugabe ist es oft gut, den Umfang der CSS zu berücksichtigen . Beachten Sie, dass Sie Stile für ein Element mehrfach deklarieren können. So können Sie CSS für jedes a Element in Ihrem HTML und CSS für a Elemente in einem bestimmten Bereich machen.

Mehr über CSS-Selektoren:

• Sitepoint
• Quirksmode
• Net Tuts
• Smashing Magazine

Answer 2

Haben Sie diesen Code ausprobiert?

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; 
} 

Idealerweise sollten Sie mit einer Klasse oder ID ein div um Ihre Bilder setzen und diese ID/Klassenwert verwenden, um die Anker zu wählen (a {}) Tags, die Sie benötigen. Ich nahm nur die ID des Container DIV

Answer 4

Denken Sie daran, wenn Sie Ihre Wähler wirklich spezifisch machen, wie #Content. myDiv a.link statt #Content a.link, je spezifischer ic überstimmt die weniger spezifischen.

Nur ein Tipp