首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

嵌套悬停: not in SASS is not working

嵌套悬停是指在CSS中使用SASS预处理器时,通过嵌套选择器来实现鼠标悬停效果的样式设置。然而,在SASS中,并没有直接提供"not"关键字来实现"not in"的功能。

要实现嵌套悬停的效果,可以使用以下方法:

  1. 使用父选择器:在SASS中,可以通过使用"&"符号来引用父选择器。通过在父选择器前添加"&:not(.class)",可以实现排除某个class的效果。例如:
代码语言:sass
复制
.parent {
  &:not(.exclude-class):hover {
    /* 悬停时的样式 */
  }
}
  1. 使用父选择器和子选择器:通过将父选择器和子选择器组合使用,可以实现嵌套悬停的效果。例如:
代码语言:sass
复制
.parent {
  &:hover {
    .child:not(.exclude-class) {
      /* 悬停时的样式 */
    }
  }
}

这样,当鼠标悬停在父元素上时,只有不包含.exclude-class类的子元素才会应用悬停样式。

对于SASS的嵌套悬停问题,腾讯云并没有特定的产品或服务与之相关。然而,腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,可满足各种应用场景的需求。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • CSS 即将支持嵌套,SASSLESS 等预处理器已无用武之地?

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。...随着 CSS 自定义属性(CSS Variable)的大规模兼容,到如今 CSS 即将支持嵌套,一些预处理器的核心功能已经被 CSS 原生支持,这是否表示 SASS/LESS 等预处理器已无用武之地?...规范的几个阶段 首先简单介绍一下,一个规范从提出到落地,会经历的一些阶段: 编辑草案 Editor's Draft (ED) 工作草案 Working Draft (WD) 过渡-最后通告工作草案 Transition...– Last Call Working Draft (LCWD) 候选推荐标准 Candidate Recommendation (CR) 过渡-建议推荐标准 Transition – Proposed...除此之外,我觉得 SASS\LESS 等预处理器还有一些比较有意思的功能(函数),是即便原生 CSS 支持了自定义属性和嵌套之后依旧欠缺的,我简单罗列罗列我的看法。

    83820

    手把手教你使用scss

    嵌套: SCSS允许你在选择器内部嵌套规则,从而使样式的层次结构更加清晰和可读。嵌套可以提高代码的可维护性,特别是在处理复杂的选择器结构时。...这时我们之前安装的Live Sass Compiler插件就派上用场了 我们可以通过点击状态栏上的“Watch Sass”,就可以进行对我们SCSS文件的编译。...你也可以点击状态栏上的“Stop Watching Sass”来关闭编译。...w=540&h=429&e=png&b=1f1f1f" alt="image.png" /> SCSS特性--嵌套**(父选择器里可以嵌套子选择器) 大多数网页开发者使用SCSS的一个原因是因为它具有嵌套特性...alt="image.png" /> 我们为父元素添加一个悬停状态的样式:(当我鼠标经过时父元素背景色变为黄色) .parent { padding: 2rem; background-color

    70721

    less和sass的区别,你了解多少?

    2、Sass: 是一种动态样式语言,Sass语法属于缩排语法, 比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。...3、嵌套规则——Class中嵌套class,从而减少重复的代码; 4、运算——CSS中用上数学; 5、颜色功能——可以编辑颜色; 6、名字空间(namespace)——分组样式,从而可以被调用...: (1)、Sass中的变量 使用 $变量名:变量值,声明变量; 如果变量需要在字符串中嵌套,则需使用#加大括号包裹; border-#{$left}:10px solid blue; (2)、Sass...中的运算,会将单位也进行运算,使用时需注意最终单位 例:10px10px=100pxpx (3)、sass中的嵌套:选择器嵌套,属性嵌套,伪类嵌套 选择器嵌套 ul{ li{} } 后代 ul{...>li{} } 子代 &:表示上一层 div{ ul{ li{ &==“div ul li” } } } 属性嵌套:属性名与大括号之间必须有: 例如:border:{color:red;} 伪类嵌套

    5.4K20

    Sass和Less(预处理器)「建议收藏」

    Sass和Less(预处理器) 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪类嵌套、属性嵌套Sass) 运算 函数 混合、命名空间...Sass和Less都属于预处理器。Less文件以.less结尾,Sass文件新版的以.scss结尾,老版的以.sass结尾。 Less文件和Sass文件都会生成css文件。...Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套Sass) 在Less和Sass中,可以对标签嵌套,在里面写各个层级写相应的样式,编译完成后,会自动写好对应的选择器。...伪类嵌套,需要在伪类的冒号前面加&,不然会有空格。 属性嵌套只有在Sass中有,Less没有。...此代码由Java架构师必看网-架构君整理 /* 选择器嵌套 */ #div3{ width: 300px; .name{ color: aqua;

    4.3K10

    sass语法基础

    6.语法基础 一、Sass变量 在Sass中,我们声明变量使用的是“$”(美元符号)开头。Sass的变量包括3部分:声明符、变量名、值。...语法: image.png 说明: 在Sass中,对于变量的取值有2种方式:(1)一般值;(2)默认值。定义变量的默认值很简单,我们只需要在“变量值”后面加上“!default”就可以了。...嵌套 Sass为我们提供了一种方便的操作方式:嵌套。...在Sass中,共有3种嵌套方式: (1)选择器嵌套; (2)属性嵌套; (3)伪类嵌套; 四、Sass插值 在Sass中,我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个...语法: #{变量} 五、Sass注释 在Sass中,共有3种注释方式: (1)/*注释内容*/ (2)//注释内容 (3)/*!

    31750

    您知道SASS吗?

    SASS是一种预处理器及样式表语言,由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能,例如变量,嵌套规则,mixin,函数等。...SASS使嵌套/分组CSS选择器和构建样式表变得更加容易 Sass通过在其中嵌套CSS类或选择器并在后台生成CSS使其成为可能。...Sass还使CSS代码更整洁,因为Sass会自动为您对CSS代码进行分组,并且也同样包含了代码嵌套。...现在如果你用sass来做这件事,它看起来是这样的: 上面的示例展示了SASS如何通过使用(&)将CSS选择器串联在({})中来嵌套几个选择器。...在纯CSS中,父子关系如下所示: Sass是这样处理的: 并排比较,您可以看到这两者有很大区别: 就像选择符连接一样,使用Sass通过将CSS父子关系分组到括号中,自动为您生成CSS的嵌套父子关系。

    91510

    09-移动端开发教程-Sass入门

    变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。...redbox { background-color: #ff0000; color: #000000; } 6.2 父选择器 & (Referencing Parent Selectors: &) 在嵌套...CSS 规则时,有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器。...---- #main { color: black; } #main-sidebar { border: 1px solid; } 6.3 @at-root @at-root用来跳出当前选择器嵌套

    2.3K90

    09-移动端开发教程-Sass入门

    变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。...redbox { background-color: #ff0000; color: #000000; } 6.2 父选择器 & (Referencing Parent Selectors: &) 在嵌套...CSS 规则时,有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器。...---- #main { color: black; } #main-sidebar { border: 1px solid; } 6.3 @at-root @at-root用来跳出当前选择器嵌套

    1.8K60

    SASS学习笔记(一)

    一、为什么使用SASS CSS不是编程语言,没有变量、条件语句等等,只是单纯的描述,因此为CSS加入编程元素(即“CSS预处理器”)。...是基于jQuery的,SASS是用Ruby语言写的(但是两者语法没有关联,没有Ruby的基础没关系),所以安装SASS之前必须先安装Ruby。...3)安装Ruby完毕后,win+r--cmd--enter 打开命令框,输入gem install sass,安装sass 4)不成功多试几次,安装成功即可使用sass了。...允许使用加减乘除算式 div{   width:100px+20px; } 3)嵌套sass可以将css中的包含选择器写成嵌套形式 3.1) 标签嵌套 css: div  h2{   color:red...; } 写成sass: div{   h2{     color:red;   } } 3.2)属性嵌套(如border-color拆开成嵌套格式:如下)注意border后有冒号(想象成将-改成了:)

    1.4K80
    领券