CSS all that start with chaining - CSS select all IDs that start with "u"and are in :hover and control other id that start with u

Question

我希望我能解释清楚。

我有自动生成的代码，我希望用 CSS 覆盖它。

这是我希望覆盖的代码示例:

#u1150:hover #u1153-4 p {color: red}

重要提示:此代码中的“u”将始终生成，其他数字将随机生成并添加到 u(例如#u3726 或#u3427-12)。因为我总是可以指望生成 u，所以我想通过 u 字母控制这些 ID 并更改颜色，所以我尝试了这个:

[id^u]:hover [id^u] p {color: green !important}

我尝试用通俗易懂的语言:
1.选择所有以u开头且在:hover
中的ID2.进一步选择所有以u开头的ID
3.进一步选择p标签并给它不同的颜色(在本例中为绿色)

这可以实现吗，因为我的代码没有达到预期的结果。

Answer 1

您在 ^ 之后缺少 = 符号。

[id^="u"]:hover [id^="u"] p { ... }

[id^="u"]:hover [id^="u"] p {
  color: green;
}

<div id="u123">
  <span id="u124">
    <p>Hover here to make this green</p>
  </span>
</div>

<hr>

<div id="u245">
  <div>
    <div id="u246">
      <p>Hover here to make this...</p>
      <span>
        <p>...and this green</p>
      </span>
   </div>
  </div>
</div>