有关.captain.picard * #riker对CSS的含义的信息

Question

我想知道.captain.picard * #riker是什么意思。我很确定这意味着任何带有“captain picard”类（例如div）的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

只需删除*即表示所有元素＆＃39;。看看它是如何工作的

＆＃13;

＆＃13;

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

.captain.picard2 * {
  color: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你必须删除*，因为它代表了元素与类和id之间的每个可能元素

Answer 3

  

我很确定这意味着任何带有类＆＃34;队长picard＆＃34;的HTML元素（例如div）选择内部的所有内容，然后在所有内容中选择所有带有id＆＃34; riker＆＃34;的所有html元素。选择和风格。

这可能是.captain.picard *#riker（在 *被忽略后注意空格），或只是.captain.picard #riker。

用空格分隔*和id选择器代表两个不同的元素，其中*是祖先。将其添加到.captain.picard（及其后代组合子）并且您有三个级别的嵌套，这与此处的结构不匹配。

Answer 4

如果你只想设置一个你不需要使用的div项目*

，那么我们就可以清楚了

只需使用

  .captain  #riker {
  color: red;
  }

一个类选择器很好

.picard  #riker {
 color: red;
  }

会做同样的事情

但如果你想选择队长类下的所有元素，你可以使用* 例如

.captain  * {
color: green;

}

Answer 5

通过使用这样的类   .captain.picard #riker 你所说的可以完成，即在课堂'.captain.picard'中，所有带有'#riker'的id都按照给定的样式改变。

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

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

Answer 6

您的密码：

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

当CSS为：.captain.picard *时，它会直到 piecard ，然后定位在其下方的所有选择器。如果这是写的 - 下面的所有内容都是红色的。

//当CSS为：.captain.picard * #riker时，它会直到 piecard ，然后定位其下方的所有选择器，并尝试将#riker作为所有人的子项但是找不到一个。因此没有红色。

但是，根据你的CSS。 当.captain.picard * #riker直到 piecard 然后定位在其下方的所有选择器并尝试查找 #riker 作为所有人的子项时（在这种情况下， .something ）。 它在*的子项中找到 #riker 因此颜色是红色的：

或您可以定位为.captain.picard *#riker 但是，您也可以在不添加*的情况下轻松完成此操作。

简单： 您编写了3级CSS层次结构（因为您在space之后和*之前添加了#riker），但在HTML中 - 只有两个级别层次结构。除非您在HTML中添加中间级别，否则您的css无法获得目标。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;