使用 CSS/SASS 和焦点文本颜色更改 a:before 的背景 URL。答案

【问题标题】：Changing background URL of a:before with CSS/SASS and color of text on focus.使用 CSS/SASS 和焦点文本颜色更改 a:before 的背景 URL。
【发布时间】：2018-04-28 16:34:05
【问题描述】：

当关注链接时，我需要更改 SVG 图标的背景 URL。

这是 HTML：

<a class="foo" href="google.com">
    <span>Help</span>
</a>

这是我迄今为止所做的无济于事的SASS：

.foo {
    &:before {
        background: url("#{$active}") center center no-repeat;
    }

   [data-whatintent='keyboard'] &:focus {
        background-color: transparent; // Currently purple, make it transparent
         color: purple; // Currently white, make it purple
         &:before {
             background: url("#{$focus}") center center no-repeat;
         }
         span {
             background-color: purple;
             color: white;
         }
    }
}

我怎样才能让 onFocus 我将span 的背景颜色更改为紫色，span 的文本为白色，并更改 &:before 上的背景 url？我到底做错了什么？

【问题讨论】：

[data-whatintent=‘keyboard’] 的作用是什么？它在你的 html 中应用在哪里？
它是一个名为 what-input @muecas 的库
该数据属性应用于哪个元素？给a.foo?
是的，对于可操作的项目，例如a.foo@muecas
好的，我提出了一个解决方案，请测试一下，以便我进一步协助您获得所需的结果。

标签： html css sass frontend

【解决方案1】：

假设您在评论中提到了什么（a.foo 获取数据属性[data-whatintent="keyboard"]），您应该稍微修改一下您的scss 代码：

.foo {
    &:before {
        background: url("#{$active}") center center no-repeat;
    }

   &[data-whatintent='keyboard']:focus { // Modified line
       background-color: transparent;
       color: purple;
       &:before {
           background: url("#{$focus}") center center no-repeat;
       }
       span {
           background-color: purple;
           color: white;
       }
    }
}

在您的代码[data-whatintent='keyboard'] &:focus 编译为[data-whatintent='keyboard'] .foo:focus，因此选择器应用于.foo:focus 包含在[data-whatintent='keyboard'] 中。如果像您在 cmets 中提到的那样，.foo 是获取数据属性的元素，那么我建议的代码应该可以工作。

希望对你有帮助。

【讨论】：

其实这行不通。我道歉，我说错了。 data 属性在文档上设置。我发现由于所有相互冲突的特殊性，没有办法绕过它。不过感谢您的帮助。
因此，如果未通过 JavaScript 设置数据属性，您的代码应该可以工作。那是什么冲突？也许只指定数据属性而不是它的值就可以了。