CSS选择第三个相邻元素

Question

考虑下面的html结构，我试图根据第一个孩子的unique href属性选择父div的仅第三个孩子。 a[href*="/view/12345"]。

限制：

1. 我无法将id或其他类添加到html
2. 父div在其他页面上重复，但是第一个子anchor href属性对于每个不同的页面都是唯一的

    <div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
        <a href="/products/units/view/12345">...</a> 
        <div class="p-4 pb-0">
             <h2 class="text-lg font-semibold">...</h2>
             <div class="mt-4 my_content border-b">
                 ...
             </div>
        </div>
        <div class="flex w-full p-4">
             <div class="flex-none my-auto my_custom_text">
                 STYLE ME GREEN
             </div>
        </div>
    </div>

我尝试过：

a[href*="/view/12345"] < div { 
   color: #46845f;}

Answer 1

无需考虑父元素，只需使用如下所示的sibling selector

a[href*="/view/12345"] + * + div

这将简单地在与[div]链接的next元素之后选择next href。考虑到您的链接将始终是第一个链接，这将是您的第三个孩子。

a[href*="/view/12345"] + * + div {
  color:green
}

<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
  <a href="/products/units/view/12345">...</a>
  <div class="p-4 pb-0">
    <h2 class="text-lg font-semibold">...</h2>
    <div class="mt-4 my_content border-b">
      ...
    </div>
  </div>
  <div class="flex w-full p-4">
    <div class="flex-none my-auto my_custom_text">
      STYLE ME GREEN
    </div>
  </div>
</div>

<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
  <a href="/products/units/view/12945">...</a>
  <div class="p-4 pb-0">
    <h2 class="text-lg font-semibold">...</h2>
    <div class="mt-4 my_content border-b">
      ...
    </div>
  </div>
  <div class="flex w-full p-4">
    <div class="flex-none my-auto my_custom_text">
      DON'T STYLE ME
    </div>
  </div>
</div>