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

Question

我想知道.captain.picard * #riker是什么意思。我非常肯定，这意味着任何具有类"captain“(例如div )的HTML元素都有它所选的所有内容，然后所有选中的html元素都被选中并设置为id "riker”。例如：

<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;
}

那么这个词应该是红色的，对吧？不会发生的。我很困惑为什么这是..。如果我去掉#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>

​

Answer 2

您必须移除*，因为它代表所有可能的元素，这些元素在元素与类和id之间

Answer 3

我非常肯定，这意味着任何具有类"captain“(例如div )的HTML元素都有它所选的所有内容，然后所有选中的html元素都被选中并设置为id "riker”。

这要么是.captain.picard *#riker (注意*被省略后的空格)，要么是.captain.picard #riker。

用空格分隔*和id选择器代表两个不同的元素，其中*是祖先。将其添加到.captain.picard (及其后代组合器)中，您将有三个层次的嵌套，这与这里的结构不匹配。