Question

我有这个html标记，由于我的主题，我无法改变。

<div class="x-breadcrumb-wrap">
  <div class="x-container max width">
    <div class="x-breadcrumbs"><a href="https://www.domain.com"><span class="home"><i class="x-icon-home" data-x-icon="&#xf015;"></i></span></a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span> <a href="/guides/">Guides</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span>      <span class="current"><a href="/guides/my-guide/"> london</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span> <span class="current"><a href="/guides/my-guide/stays">Stays</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span>      <span class="current">Venue</span></div>
  </div>
</div>

我正在尝试删除第一个：child（即主页图标）的背景，但是使用背景下方的代码将被移除以用于面包屑中的后续链接。

.x-breadcrumb-wrap a {
  color: #ffffff !important;
  background: #2b2b2b;
  padding: 1px 6px 1px 6px;
  text-shadow: none !important;
  letter-spacing: 0.13em;
  border-radius: 3px;
}

.x-breadcrumb-wrap a:first-child {
  background: transparent;
}

任何想法？

Answer 1

您的选择器没有按预期工作，因为它选择了第一个孩子的所有后代a元素。

您需要使用direct child selector, >，才能定位a元素的直接子.x-breadcrumbs元素。这样做时，只选择.x-breadcrumbs元素中的第一个子元素，而不是恰好是其父元素的第一个子元素的所有后代元素。

.x-breadcrumb-wrap .x-breadcrumbs > a:first-child {
  background: transparent;
}

使用CSS更改第一个孩子的背景

1 个答案: