无法使锚标签在手风琴

Question

我在使用的HTML中遇到了手风琴的问题

<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Working with Apple devices</a></div>
                    <div class="collapse">
                        <div class="accCntnt">
                            <p style="font-weight:normal; color:#333;">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                </p>
                        </div>
                    </div>

和css

.adCntnr .acco2 .expand a {
background: url(../images/rnd_plus_icon.png) no-repeat 0 4px;
padding-left: 25px;
text-decoration: none;

这确保每个标题都是可点击的，旁边有一个圆形加号，就像这样 -

在我想在文本中添加图片链接之前，一切都很好。

修改文本后添加像这样的图像链接 -

<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p> <a href="#" ><img src="LinkToButtonIcon"/></p>  

我明白了

我能理解为什么会发生这种情况，css正在按照我的要求去做，我不知道如何解决这个问题并且基本上使css不对A标签做任何事情我的图片链接在文本中 - 任何帮助将不胜感激

Answer 1

您可以使用.adCntnr .acco2 .expand > a { /*the properties as is.*/ } 父子css选择器：

.expand

这将仅定位作为div > a{ color:orange;}元素的直接子元素的锚点。

<div>
<a href='#'>This is direct child of div. <p><a href='#'>This is a child too but not a direct one.</a></p></a>
</div>

LinkMasterFields