时间戳

首页 > 解决方案 > CSS：选择具有特定类的下一个元素

html - CSS：选择具有特定类的下一个元素

问题描述

我有以下 html 代码，并且我正在寻找一种方法来选择仅在其中 id 以“cf-”开头的 select 元素之后span由内部标识的元素：class="selection"

<select id="cf-1234567891322418287202826"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // Apply CSS HERE
    </span>
</span>

<select id="cf-8298298876787346863834334"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // Apply CSS HERE
    </span>
</span>

<select id="tu-656555"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // DO NOT Apply CSS HERE
    </span>
</span>

我尝试了以下代码但没有任何结果。我的错误在哪里？

select[id^="cf-"] + span.select2-selection {
    color: blue;
}

标签： htmlcss

解决方案

span.select2-selection不是兄弟，select[id^="cf-"]因此您需要将该选择器更改为

select[id^="cf-"] + span span.select2-selection {
   ...
}

因为您正在尝试匹配作为.的兄弟元素span.select2-selection的子元素的子元素。spanselect[id^="cf-"]

推荐阅读