CSS所有以链接开头的id - CSS选择以"u“开头的所有id，并在:悬停并控制以u开头的其他id。

Question

我希望我能解释清楚。

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

下面是我希望重写的代码的一个示例：

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

重要:代码中的"u“将始终生成，其他数字将随机生成并添加到u中(例如#u 3726或#u3427-12)。由于我总是可以指望生成u，所以我想通过u字母来控制这些ID并更改颜色，所以我尝试了如下：

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

我用简单的语言试图：

1. 选择所有以u开头并处于以下状态的ID：
2. 进一步选择以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>

​