Question

我希望我能够解释。

我已经自动生成了我希望用CSS覆盖的代码。

以下是我希望覆盖的代码示例：

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

重要提示：＆＃34; u＆＃34;在此代码中将始终生成，其他数字将随机生成并添加到u（例如＃u3726或＃u3427-12）。因为我总是可以指望你被生成，我想通过你的字母控制这些ID，并改变颜色，所以我尝试了这个：

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

用简单的语言我试图：
1.选择所有以u开头且位于以下内容的ID：hover
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>

所有以链接开头的CSS - CSS选择以＆＃34; u＆＃34;开头的所有ID并在：悬停并控制以u开头的其他ID

1 个答案: