Question

我有幻灯片，我能够将描述显示为黄色，这是我想要的。

但是描述上方的标题（H2）是不可见的，除非你将鼠标悬停在它上面。我目前将此作为我的CSS：

.slideshow_container { background: #000; }
.slideshow_container a { text-decoration: none; }
.slideshow_container .slideshow_slide { margin-right: 2px; }
.slideshow_container .slideshow_slide_text h2 { color: #FFFFFF; text-align: left; 
font-size: 1.3em; }
.slideshow_container .slideshow_slide_text p { color: #FFFF00; font-weight: bold; 
text-align: left; }
.slideshow_container .slideshow_slide_image { }
.slideshow_container .slideshow_slide_video { }
.slideshow_container .slideshow_description { background: #000; width: 100%; }
.slideshow_container .slideshow_description h2  { color: #FFFFFF; font-size: 1.3em; 
text-align: left; }
.slideshow_container .slideshow_description p  { color: #FFFF00; font-size: 1.1 em; 
font-weight: bold; text-align: left; }
.slideshow_container .slideshow_description a  { color: #FFFF00; font-weight: bold; }
.slideshow_container .slideshow_transparent { filter: alpha(opacity = 50); opacity: 0.5; }
.slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 80); opacity: 
0.8; }

HTML：

<div class="slideshow_container slideshow_container_slideshow-jquery-image-gallery-custom-
styles_1" style="height: 600px; max-width: 660px;" data-session-id="0"><div
class="slideshow_controlPanel slideshow_transparent"><ul><li
class="slideshow_togglePlay"></li></ul></div><div
class="slideshow_button slideshow_previous slideshow_transparent"></div><div
class="slideshow_button slideshow_next slideshow_transparent"></div><div
class="slideshow_pagination"><div
class="slideshow_pagination_center"></div></div><div
class="slideshow_content" style="display: none;"><div
class="slideshow_view"><div
class="slideshow_slide slideshow_slide_image"> <a
target="_self" > <img src="http://www.occupyhln.org/wp-content/uploads/2013/07/Audrey-    
Edmunds.jpg" alt="Audrey Edmunds" width="1000" height="588" /> </a><div
class="slideshow_description slideshow_transparent">
<h2><a target="_self" >Audrey Edmunds</a></h2>
<p><a target="_self" >Here, Audrey Edmunds poses at the John C. Burke Correctional Center 
in Waupun, Wis., 10 years into serving her 18-year conviction and sentence for shaking a 
baby to death, while babysitting. She was freed in Feb., 2008 after an appeals court said 
new research into the syndrome cast doubt on her guilt. According to Northwestern 
University's Center on Wrongful Convictions, experts asserted that symptoms they once 
thought were proof of Shaken Baby Syndrome can be from other causes, including accidents, 
illness, infection, old injuries, and congenital defects.</a></p>
</div></div><div style="clear: both;"></div></div>

段落部分似乎运作良好，描述显示为黄色。但是我想让标题显示为白色，所以它很突出。目前，您必须将鼠标悬停在段落上方的标题上才能看到它们。

你可以看到this particular page上的旁观......我试图嘲笑它，但似乎没什么用。

非常感谢任何有关这方面的指导！

Answer 1

所有关于特异性Id覆盖任何类。

您有一条规则#content h2 a, #content h2 a:visited，正如我所说，它会覆盖您的.slideshow_container .slideshow_description h2选择器

详细了解特异性Here。

Answer 2

看起来这种风格#content h2 a占优势，并以#111111覆盖您的白色

由于您使用id与该stlye，它将覆盖此样式.slideshow_container_style-dark .slideshow_description a

您也不应该认为h2中的文字有链接标记（a）。这就是为什么您的上述代码段无法识别的原因：.slideshow_container .slideshow_description h2

要解决此问题，您可以尝试：#content .slideshow_container .slideshow_description h2 a。这有点难看，但应该有用。

为什么在这种情况下我无法使用CSS影响H2标题？

2 个答案: