blocks|key|205267|text|这将有效地汇编成：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205268|.A+.B+>+*+{+...|code-block|syntax|javascript|205269|所以基本上，任何元素都是.A+.B的直接子元素|offset|length|style|CODE|205270|entityMap^0|0|0|C|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This will effectively compile to:</p>

<pre><code>.A .B &gt; * { ...
</code></pre>

<p>So basically, any element that is a direct child of <code>.A .B</code></p>


blocks|key|205283|text|它的意思是-每一个直接的孩子".B“。它将在本例中选择h1和p标记，但不选择span：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205284|<div+class="A">
++<div+class="B">
++++<h1>Title</h1>
++++<p>Paragraph</p>
++++<p>
++++++<span>
++++++</span>
++++</p>
++</div>
</div>|code-block|syntax|javascript|205285|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It means - every direct child to ".B". It will select the h1 and p tags in this example, but not the span:</p>

<pre><code>&lt;div class="A"&gt;
  &lt;div class="B"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;p&gt;Paragraph&lt;/p&gt;
    &lt;p&gt;
      &lt;span&gt;
      &lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1653449|text|你放在这里的代码是SCSS(SASS)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1653450|这将生成以下CSS：|1653451|.A+{
++++padding:+0;
}
.A+.B+>+*+{
++++boxShadow:+'0+1px+1px+rgba(0,+0,+0,+.1)';
}|code-block|syntax|javascript|1653452|.B+>+*+{}的意思是，它将选择任何直接属于.B类的元素。|style|CODE|1653453|entityMap|0|LINK|mutability|MUTABLE|url|https://sass-lang.com/guide^0|9|A|0|0|0|0|0|9|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@$A|13|B|14|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>The code you placed here is <a href="https://sass-lang.com/guide" rel="nofollow noreferrer">SCSS(SASS)</a></p>

<p>This will generate the following CSS:</p>

<pre><code>.A {
    padding: 0;
}
.A .B &gt; * {
    boxShadow: '0 1px 1px rgba(0, 0, 0, .1)';
}
</code></pre>

<p>And the meaning of <code>.B &gt; * {}</code> is this will select any element that is immediate children of .B Class.  </p>


blocks|key|1021921|text|有时后代选择器有点过火，选择的比希望的要多。有时只需要选择父元素的直接子元素，而不是在祖先内部嵌套的元素的每个实例。在这种情况下，可以通过在选择器内的父元素和子元素之间放置大于符号>来使用直接子选择器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1021922|例如，项目>p是一个直接的子选择器，仅标识直接属于项目元素的p元素。放置在项目元素之外的任何p元素，或者嵌套在除项目元素之外的另一个元素内的元素，都不会被选中。|1021923|下面，第3行中的段落是其父项目的唯一直接子项，因此被选中。|1021924|CSS:|offset|length|style|BOLD|1021925|article+>+p+{...}|code-block|syntax|javascript|1021926|HTML:|1021927|<p>...</p>
<article>
++<p>This+paragraph+will+be+selected</p>
++<div>
++++<p>...</p>
++</div>
</article>|1021928|entityMap^0|0|0|0|0|4|0|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@$H|10|I|11|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|12|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|13|8|@$H|14|I|15|J|K]]|9|@]|A|$]]|$1|S|3|T|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>Sometimes descendant selectors go a bit overboard, selecting more than hoped. At times only the direct children of a parent element need to be selected, not every instance of the element nested deeply inside of an ancestor. In this event the direct child selector may be used by placing a greater than sign, >, between the parent element and child element within the selector.</p>

<p>For example, article > p is a direct child selector only identifying p elements that fall directly within an article element. Any p element placed outside of an article element, or nested inside of another element other than the article element, will not be selected.</p>

<p>Below, the paragraph on line 3 is the only direct child of its parent article, thus selected.</p>

<p><strong>CSS:</strong></p>

<pre><code>article &gt; p {...}
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;p&gt;...&lt;/p&gt;
&lt;article&gt;
  &lt;p&gt;This paragraph will be selected&lt;/p&gt;
  &lt;div&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;
&lt;/article&gt;
</code></pre>


<p>I am trying to understand the following CSS (perhaps not pure CSS):</p>

<pre><code>.A {
    padding: 0
    .B {
        &gt; * {
           boxShadow: '0 1px 1px rgba(0, 0, 0, .1)'
        }
    }
}
</code></pre>

<p>The part I don't understand is:
<code>&gt; * {}</code></p>

<p>I'm familiar with <code>&gt;</code> as a child combinator placed between two selectors, but here it isn't between two selectors - so what does this rule mean?</p>

<p>I believe <code>*</code> selects everything inside whatever component <code>&gt;</code> is selecting.</p>


What does this CSS rule mean? > *

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图理解以下CSS (可能不是纯CSS)：.A {    padding: 0    .B {        > * {           boxShadow: '0 1px 1px rgba(0, 0, 0, .1)'        }    }}我不明白的是：> * {}我很熟悉>作为一个放在两个选择器之间的子...

问这个CSS规则是什么意思？>*
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问这个CSS规则是什么意思？>*EN