less 相关问题

Less是一个开源样式表预处理器,它使用动态行为(如变量,混合,操作和函数)扩展CSS。对于UNIX命令,请使用[less-unix]。

为子类设置背景条件

仅当子按钮具有单击时发生的“折叠”类时,我才想更改父级(面板标题)的背景。我只能使用样式。 HTML: 我想仅当子按钮具有单击时发生的“折叠”类时才更改父级(面板标题)的背景。我只能使用样式。 HTML: <div class="panel"> <div class="panel-heading"> <button class="collapsed">...</button> </div> </div> LESS:(我找到了这个,但它不起作用) .panel-heading:has(button[class="collapsed"]) { background-color: #fff !important; } 或 .panel-heading:has(button.collapsed) { background-color: #fff !important; } 有什么建议吗? 谢谢! 您的代码正在运行,因为背景是白色的,所以您无法区分。 尝试使用不同的背景颜色。 查看以下代码: .panel-heading:has(button.collapsed) { background-color: pink; } <div class="panel"> <div class="panel-heading"> <button class="collapsed">...</button> </div> </div>

回答 1 投票 0

如何将类样式应用于除特定类及其子类之外的所有内容?(嵌套主题)

html 项目一 第二项 2.1 2.2 html <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 少 .style-b { li { color: rebeccapurple; } } .style-a { li { color: black; } } 结果图 .style-a 具有更高的优先级,因此嵌套的 .style-b 不起作用。 我将css样式简化为一级嵌套li样式,实际上我的项目中有多个嵌套类。 我尝试使用 :not() 来排除另一个,但似乎内部的复合选择器是被禁止的。 .style-b *:not(.style-a *) { li { color: rebeccapurple; } } .style-a *:not(.style-b *) { li { color: black; } } 我现在添加另一个类 .important 来提高优先级,并在嵌套类中添加 important 。 但它只能支持两级嵌套,真是愚蠢。 ._styleA() { li { color: black; } } ._styleB() { li { color: rebeccapurple; } } .style-a { ._styleA() } .style-a.important { ._styleA() } .style-b { ._styleB() } .style-b.important { ._styleB() } 我终于弄清楚我的问题是如何实现嵌套主题。我发现 React UI 框架ant design的嵌套主题满足了我的需求。我自己也会实现同样的目标。 参见ant design的css-var-plan 您可以像这样选择style-bul.style-b > li ul.style-b > li { color: rebeccapurple; } .style-a li { color: black; } <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul>

回答 2 投票 0

如何将班级风格应用于除特定班级及其孩子之外的所有班级?

html 项目一 第二项 2.1 2.2 html <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 少 .style-b { li { color: rebeccapurple; } } .style-a { li { color: black; } } 结果图 .style-a 具有更高的优先级,因此嵌套的 .style-b 不起作用。 我将css样式简化为一级嵌套li样式,实际上我的项目中有多个嵌套类。 我尝试使用 :not() 来排除另一个,但似乎内部的复合选择器是被禁止的。 .style-b *:not(.style-a *) { li { color: rebeccapurple; } } .style-a *:not(.style-b *) { li { color: black; } } 我现在添加另一个类 .important 来提高优先级,并在嵌套类中添加 important 。 但它只能支持两级嵌套,真是愚蠢。 ._styleA() { li { color: black; } } ._styleB() { li { color: rebeccapurple; } } .style-a { ._styleA() } .style-a.important { ._styleA() } .style-b { ._styleB() } .style-b.important { ._styleB() } 您可以像这样选择style-bul.style-b > li ul.style-b > li { color: rebeccapurple; } .style-a li { color: black; } <ul class="style-b"> <li>Item One</li> <li>Item Two <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li>Item Three <ul class="style-a"> <li>3.1 <ul> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3 <ul class="style-b"> <li>3.1.3.1</li> <li>3.1.3.2</li> </ul> </li> </ul> </li> <li>3.2</li> </ul> </li> </ul> 我终于弄清楚我的问题是如何实现嵌套主题。我发现 React UI 框架ant design的嵌套主题满足了我的需求。

回答 2 投票 0

Overflow-x:滚动切断 div 的开头

这可能是一个简单的修复,但我在任何地方都找不到它 - 也许我使用了错误的术语,所以如果我重复已经提出的问题,我深表歉意。 我已经创建了

回答 3 投票 0

Overflow-x:滚动切断 div 的开头

这可能是一个简单的修复,但我在任何地方都找不到它 - 也许我使用了错误的术语,所以如果我重复已经提出的问题,我深表歉意。 我已经创建了

回答 3 投票 0

更少的嵌套规则 - 我可以将级联选择器放在主选择器之前吗?

我的选择器需要是: .tooltip.right .tooltip-arrow 所以我使用以下嵌套规则: .tooltip-箭头{ .tooltip.right { 左:-(@ttArrowSize - 5); 顶部边距:-@ttArrowSize;

回答 1 投票 0

如何在较少的 mixin 中使用映射

来自文档: 我写: #颜色() { 背景DarkPrimary: '#0747A6'; 背景中:'#dfe1e6'; 背景光:'#ebecf0'; 背景最轻:'#F4F5F7';

回答 1 投票 0

magento 2.4.6 样式覆盖问题

我有一个 magento 2.4 主题,它使用 styles-m.less 文件定义其 css 应用程序/设计/前端/供应商/主题/web/css/styles-m.less 还有一个源子目录,每个

回答 1 投票 0

如何让 MSBuild 目标在输入文件更改时运行?

嗨,我对 MSBuild 还很陌生,所以任何反馈都非常有帮助。我正在尝试执行一个构建步骤来编译任何 *.less 文件以与 Blazor 一起使用。我以前使用过 WebCompiler 但它不...

回答 1 投票 0

表单边框在内部元素周围创建空间

我正在尝试创建一个简单的边框表单,其中有一个按钮和 type="text" 的输入。 似乎有一个我无法删除的间距。 主要的 { 显示:柔性;

回答 2 投票 0

VS Code 1.86 Less 语法高亮不正确

对于某些属性和变量,VS Code 中 Less 文件的语法突出显示不正确,但对于大多数文件来说是正确的。 我已尝试删除与...相关的设置中的所有内容

回答 1 投票 0

如何编写适用于所有情况的 :not() CSS 排除?

当定义了 CSS 类作为具有此规则的父级时,我尝试排除一些 CSS 规则: .cc div:not(.cc-ei) li { 颜色:红色; } 但它并不适用于所有情况,正如您在...

回答 1 投票 0

SCSS 和 LESS 的区别

我读过有关 SCSS 和 LESS 的内容。但我无法清楚地理解其中的差异。 我知道SCSS和LESS都具有更多CSS的功能(我的意思是CSS的扩展)。 SCSS 之间有什么不同...

回答 2 投票 0

地址运算符(与号)和 @media 查询不起作用

我正在分享下面的代码片段,其中我使用嵌套,但我很困惑如何在其中使用媒体查询。 。联系 { @media only 屏幕和(最大宽度:1200px){ & > .

回答 1 投票 0

我在react程序中使用了less,但是less没有生效

我在react程序中使用了less,但是less没有生效 我使用了最小集,以下是内容 应用程序.tsx: 从“反应”导入反应 进口 { 信息, 弹出窗口, 按钮, 复选框, } f...

回答 1 投票 0

为什么 Style Lint 忽略 Less 变量?

我最近决定开始使用Less预处理器,所以我想通过style-lint和postcss-less设置一些列表机制。我当前的配置如下所示: { “延伸”:&

回答 1 投票 0

运行 WebCompiler 时如何修复“操作错误:操作无效类型”

更换计算机迫使我安装 VS2022 和 WebCompiler 2022+ 扩展。 运行我的编译器时,会生成以下错误:OperationError: Operation on an invalid type in ......./

回答 2 投票 0

如何在 Docker 容器中安装“less”命令?

我正在使用 mariadb 容器: 图片:mariadb:10.5.8 在容器和 mysql 会话中,我尝试设置: 无寻呼机-SFX 当我跑步时: 从某个表中选择*; 我明白了 sh:1:少:不...

回答 1 投票 0

在 Angular 应用程序中混合 less 和 sass 文件

我正在使用 ng-zorro 组件库构建一个 Angular 应用程序。通常,我还会为一些实用程序导入整个 Bootstrap css 文件,例如我喜欢的网格系统和间距类...

回答 1 投票 0

python - 使用 less 作为寻呼机时到达 EOF 时无法返回

我使用 less 作为寻呼机,以便可以轻松读取应用程序的输出。我这样创建子流程: a_process = subprocess.Popen(["less"], stdin=subprocess.PIPE) 然后我...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.