blocks|key|5156921|text|如果我没理解错你的问题：https://jsfiddle.net/wx9L9jzj/3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5156922|SCSS:|style|BOLD|5156923|.parent+{
++width:+200px;
++height:+200px;
}

.children+{
++height:+100px;
++width:+100px;
++
++.is-active+&+{
++++background:+red;
++}
++
++:hover+>+&+{
++++background:+blue;
++}
}|code-block|syntax|javascript|5156924|请注意，:hover+>+&+SCSS选择器实际上是查看父节点，以确定子节点是否在:hover伪类中。这不是标准的CSS，需要将SASS语法编译成标准的CSS，而SASS是通过重写选择器来实现的。|CODE|5156925|每个+的|5156926|5156927|父选择器&是Sass发明的一种特殊选择器，用于嵌套选择器中引用外部选择器。它使得以更复杂的方式重用外部选择器成为可能，比如添加伪类或在父选择器之前添加选择器。|blockquote|5156928|5156929|当在内部选择器中使用父选择器时，会将其替换为相应的外部选择器。而不是正常的嵌套行为。|5156930|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/wx9L9jzj/3/^0|C|W|0|0|0|5|0|0|4|A|15|6|0|0|0|0|27|0|0|0|16|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1E|8|@$A|1F|B|1G|F|O]|$A|1H|B|1I|F|O]]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1J|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|1L|8|@$A|1M|B|1N|F|G]]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1P|8|@$A|1Q|B|1R|F|G]]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]]]

If I understand your question correctly: <a href="https://jsfiddle.net/wx9L9jzj/3/" rel="noreferrer">https://jsfiddle.net/wx9L9jzj/3/</a>
SCSS:
<pre><code>.parent {
 width: 200px;
 height: 200px;
}

.children {
 height: 100px;
 width: 100px;
 
 .is-active &amp; {
 background: red;
 }
 
 :hover &gt; &amp; {
 background: blue;
 }
}
</code></pre>
Note the <code>:hover &gt; &amp;</code> SCSS selector that essentially looks at the parent node to determine if the child was within a <code>:hover</code> pseudo-class. This is not standard CSS and requires the SASS syntax to be compiled to standard CSS, which SASS does by rewriting the selector.
Per <a href="https://sass-lang.com/documentation/style-rules/parent-selector" rel="noreferrer">SASS documentation on the parent (&amp;) selector</a>:
<blockquote>
The parent selector, &amp;, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.
</blockquote>

blocks|key|578404|text|如果你想用scss调用选择器中的另一个类或伪元素，你必须使用&符号。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|578405|示例：|578406|<div+class="class-1+class-2"></div>|code-block|syntax|javascript|578407|萨斯|578408|.class-1+{
++++&.class-2+{
++++}
}|578409|这将编译以下CSS|578410|.class-1.class-2+{
}|578411|要实现您所要求的目标，您需要执行以下操作：|578412|.parent+{
++++&:hover+{
++++++++.children+{
++++++++++++//+write+the+desired+CSS
++++++++}
++++}

++++//+for+the+active+class+you+write
++++&.is-active+{
++++++++.children+{
++++++++++++//+desired+CSS
++++++++}
++++}
}|578413|在悬停状态下工作fiddle。|578414|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/wx9L9jzj/4/^0|U|1|0|0|3|0|0|0|0|0|0|0|0|8|6|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|10|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

If you want to call another class or pseudo element inside a selector with scss, you have to use the &amp; symbol.

Example:

<pre><code>&lt;div class="class-1 class-2"&gt;&lt;/div&gt;
</code></pre>

SASS

<pre><code>.class-1 {
 &amp;.class-2 {
 }
}
</code></pre>

This would compile the following CSS

<pre><code>.class-1.class-2 {
}
</code></pre>

To achieve, what you're asking for, you need to do as follows:

<pre><code>.parent {
 &amp;:hover {
 .children {
 // write the desired CSS
 }
 }

 // for the active class you write
 &amp;.is-active {
 .children {
 // desired CSS
 }
 }
}
</code></pre>

Working <a href="https://jsfiddle.net/wx9L9jzj/4/" rel="noreferrer">fiddle</a> on hover.

In <code>scss</code> we can use a parent selector class:

<pre><code>&lt;div class="parent is-active"&gt;
 &lt;div class="children"&gt;&lt;/div&gt;
&lt;/div&gt;

.parent {
 width: 200px;
 height: 200px;
}

.children {
 height: 100px;
 width: 100px;

 .is-active &amp; {
 background: red;
 }
}
</code></pre>

<a href="https://jsfiddle.net/wx9L9jzj/2/" rel="noreferrer">example</a>

How would you write a parent <code>hover</code> selector?

SCSS: parent hover selector

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

在scss中，我们可以使用父选择器类：<div class="parent is-active"> <div class="children"></div></div>.parent { width: 200px; height: 200px;}.children { height: 100px; width...

问SCSS:父级悬停选择器
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SCSS:父级悬停选择器EN