html - 关于 .captain.picard * #riker 对 CSS 意味着什么的信息

Question

我想知道 .captain.picard * #riker 是什么意思。我很确定这意味着任何带有类“captain picard”(例如 div)的 HTML 元素都选择了其中的所有内容，然后在所有选择的所有 html 元素中选择了 id 为“riker”的所有 html 元素并设置了样式。例如:

<div class="captain picard">
  <p id="riker">One</p>
  <p id="pikespeak">Two</p>
  <p id="peakout">Three</p>
</div>

.captain.picard * #riker {
  color: red;
}

那么 One 一词的样式应该是红色的，对吧？不会发生。我很困惑为什么会这样……如果我去掉#riker 选择器，那么所有标签词的样式都是红色的，这完全合情合理。有人可以帮忙吗？

Answer 1

只需删除 *，这意味着“所有元素”。看看它是如何工作的

.captain.picard #riker {
  color: red;
}

.captain.picard2 * {
  color: blue;
}

<div class="captain picard">
  <p id="riker">One</p>
  <p id="pikespeak">Two</p>
  <p id="peakout">Three</p>
</div>

<div class="captain picard2">
  <p id="rike2r">One</p>
  <p id="pikespeak2">Two</p>
  <p id="peakout2">Three</p>
</div>