是否可以仅在外部小部件类中设置此头像（img）的样式？

Question

这是HTML代码段（它是从边栏中的WordPress Widget输出中提取的）：

<section id="bsp_activity_widget-5" class="widget animation-video-sidebar widget_display_topics">
    <span class="bsp-la-title">
    <h2 class="widget-title"><i aria-hidden="true" class="fa fa-inbox"></i>Latest 
    Forum Activity</h2>
    </span>
    <ul>
        <li>
            <a class="bsp-la-reply-topic-title" href="xxx">Why are extra meeting dates shown in the Midweek Editor?</a>
            <div class="bsp-activity-author">
                <span class="bsp-la-text">topic by</span>
                <span class="bsp-la-topic-author topic-author">
                    <a class="bbp-author-link" href="xxx" title="View Mr Happy's profile">
                    <span class="bbp-author-avatar"><img alt="" class="avatar avatar-14 photo" height="14" src="xxx" srcset="xxx" width="14"></span>
                    <span class="bbp-author-name">Mr Happy</span></a>
                </span>
            </div>
            <div class="bsp-activity-freshness">
                <span class="bsp-la-freshness">8 hours, 42 minutes ago</span>
            </div>
            <div class="bsp-activity-forum">
                <span class="bsp-la-text">in </span>
                <a class="bsp-la-forum-title bbp-forum-title" href="xxx">Midweek Editor</a>
            </div>
        </li>
    </ul>
</section>

我对此元素特别感兴趣：

<img alt="" class="avatar avatar-14 photo" height="14" src="xxx" srcset="xxx" width="14">

我看到它具有3个与之关联的类：

• avatar
• avatar-14
• photo

我想对CSS进行一些样式设置，并且我担心使用这些通用类名来隔离元素，因为化身以不同的速度在其他页面上使用。

我在这个班级的上层看到了

• widget_display_topics

有什么办法可以将我的头像类隔离为widget_display_topics的后代，以便仅在此小部件中设置img的样式，而在网站的其他部分没有样式？

Answer 1

如果我不理解您的意思，您想使用CSS定位特定元素而不影响具有相似类的相似元素吗？

尝试使用以下CSS选择器：

.widget_display_topics img.avatar.photo