jquery - 无法让 anchor 标签在 Accordion 上正常工作

Question

我在 HTML 中使用的 Accordion 有问题

<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

你可以使用 > parent child css selector:

.adCntnr .acco2 .expand > a {
    /*the properties as is.*/
}

这将仅针对作为 .expand 元素的直接子元素的 anchor 。

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>