- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个组件 jl-btn
可以有不同的 color
(这里的 CSS 属性)取决于它可能受到影响的其他类。这些类可以与 <a>
一起使用元素,我想在一个 Less 语句中说 :hover
和 :focus
颜色必须与正常状态相同。
.jl-btn {
color: blue;
&.jl-btn-important {
color: red;
}
&:hover, &:focus {
color: ???,
text-decoration: none
}
}
我尝试设置 color
至 inherit
或 initial
但它将其设置为黑色。如果有 jl-btn-important
,我想要的是 :hover 和 :focus 颜色为红色类,如果没有则为蓝色。
有什么想法吗?
[编辑] 不好意思,我忘了说我正在使用为 a:hover, a:focus
定义样式的 bootstrap 脚手架
最佳答案
选项 1:(如果没有其他设置覆盖默认行为)
理想情况下,不在 :hover
和 :focus
选择器下添加任何 color
设置本身应该有效。下面的代码片段就是证明。但如果它不起作用,则有一些其他选择器覆盖它。
.jl-btn {
color: blue;
}
.jl-btn.jl-btn-important {
color: red;
}
.jl-btn:hover,
.jl-btn:focus {
text-decoration: none;
}
<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>
选项 2::(如果某些其他选择器覆盖默认行为,例如 Bootstrap 或其他库)
在这种情况下,您可以将 Less 代码修改为如下所示。这会将相同的颜色应用于默认的 :hover
和 :focus
选择器,而无需在每个选择器下重复使用 color
。
.jl-btn {
&, &:hover, &:focus{
color: blue;
}
&.jl-btn-important {
&, &:hover, &:focus {
color: red;
}
}
&:hover, &:focus {
text-decoration: none
}
}
以下代码片段基于上述 Less 代码的编译 CSS 输出。
.jl-btn,
.jl-btn:hover,
.jl-btn:focus {
color: blue;
}
.jl-btn.jl-btn-important,
.jl-btn.jl-btn-important:hover,
.jl-btn.jl-btn-important:focus {
color: red;
}
.jl-btn:hover,
.jl-btn:focus {
text-decoration: none;
}
<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>
选项 3:(如果您有多个修饰符并希望避免手动编写)
如果您觉得多次编写选择器也是不必要的重复,那么您可以编写一个 mixin(如下面的代码块),让它为所有需要的选择器设置 color
。
.jl-btn {
.set-anchor-colors(blue); /* mixin to set default, hover and focus color */
&.jl-btn-important {
.set-anchor-colors(red); /* mixin to set default, hover and focus color */
}
&:hover, &:focus {
text-decoration: none;
}
}
.set-anchor-colors(@color){
&, &:hover, &:focus{
color: @color;
}
}
关于css - 如何设置:hover color to normal color with Less?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35241655/
这两种方法似乎都完成了从字符串中删除重音符号的相同工作,但我不确定是否存在一些内部差异,可以使一种方法优于另一种方法 最佳答案 分解处理的不仅仅是重音(在 Unicode 中称为标记),例如韩文音节
我在尝试绘制一些数据时收到此错误: findfont: Font family ['STIXGeneral'] not found. Falling back to DejaVu Sans. Trac
我理解规范化和规范化意味着删除数据表示中任何无意义或模棱两可的部分,将有效相同的数据转换为实际相同的数据。 例如,如果您想获取某些输入数据的哈希值,并且其他任何人对规范的相同数据进行哈希处理都获得相同
#!/usr/local/bin/perl use warnings; use 5.014; use Unicode::Normalize qw(NFD NFC compose); my $strin
我正在尝试将包含“áéíóú”等字符的字符串规范化为“aeiou”以简化搜索。 在对 this question 的回复之后我应该使用 Normalizer 类来完成它。 问题是 normalize
我正在尝试获取外语文本并输出人类可读、文件名安全的等效文本。环顾四周后,似乎最好的选择是 unicodedata.normalize(),但我无法让它工作。我试过将一些答案的确切代码放在这里和其他地方
我是 pymc 和贝叶斯统计的新手。在这里,我试图实现一个极其简单的 pymc 模型,以便与理论结果进行比较。在我的测试用例中,我假设正常先验为 mu~N(20,20) 并且可能性假设为 data~N
我正在编写一个 XPath 表达式,但我修复了一个奇怪的错误,但是以下两个 XPath 表达式之间有什么区别? "//td[starts-with(normalize-space()),'Posted
tf.random.normal 和 tf.distributions.Normal 有什么区别?或者 tf.distributions.Multinomial 和 tf.random.multino
第一步: xcodebuild -project Pods/Pods.xcodeproj build 第二个: xcodebuild archive -project 'test.xcodeproj'
我正在将 Adobe Xd 中的设计转换为 HTML 模板,其中一个元素建议使用以下 css 规则。 top: 149px; left: 54px; width: 463px; height: 2
我正在与另一位数据库设计人员就规范化进行有趣的讨论。在这个例子中,我们有一个 GameTitles 表,每条记录都必须包含游戏发布的年份。他说 2NF 要求所有内容都必须规范化,因此,要符合要求,年份
我正在尝试在 python 中加载文件。如果您运行下面的代码并加载仅包含英文单词的文件,它将加载得很好。 Listado.txt 是一个西类牙语文件,包含以下单词:abacá、abadí、abadía
我一个月前完成了这个游戏,直到今天一切都很好。我在线收到错误: odgovorNormalized = Normalizer.normalize(konResenje, Normalizer.Form
我正在使用gnutls aes加密,这是我的代码 const gnutls_datum_t * key; *key = (const char*)"tZOVP7o/u2vQB+4B/0O0ZqLWvy
我正在尝试训练一个用于面部性别和年龄检测的 cnn 模型。我的训练集包含彩色和灰度的面部图像。我如何标准化这个数据集?或者如何处理混合了灰度和彩色图像的数据集? 最佳答案 请记住,网络只会尝试了解您的
这是 DB 规范化理论中的一个概念: Third normal form is violated when a non-key field is a fact about another non-ke
我正在存储有关棒球统计数据的数据,并希望使用三个表来存储:players、battingStats 和 pitchingStats。就问题而言,每个球员都会有击球统计数据或投球统计数据,但不会两者都有
我现在正在学习推力。我有一个问题:如何用推力进行归一化? 我有一个有效的代码,但我想知道这是否是最佳方法。 struct square { __host__ __device__ float oper
所以我知道我自己可以如何解决这个问题,但是有人知道任何可以处理这个问题的现有库吗? (无论什么语言)? 最佳答案 此 API 仅支持英文,并具有职称规范化:http://api.dataatwork.
我是一名优秀的程序员,十分优秀!