:focus 在 textarea 没有真正聚焦时应用样式

【问题标题】：:focus applying styles when textarea not actually in focus:focus 在 textarea 没有真正聚焦时应用样式
【发布时间】：2019-02-03 18:49:13
【问题描述】：

我这里有 css（手写笔）：

.textarea:focus
   box-shadow: 0px 0px 73px 5px primary-color

然而 textarea 默认有盒子阴影。这是codepen链接：

【问题讨论】：

标签： css stylus

【解决方案1】：

您的样式以这样一种方式堆叠，默认 .textarea 也接收到 box-shadow：

.textarea

.textarea:focus
  box-shadow: 0px 0px 73px 5px primary-color

这会渲染到

.textarea, .textarea:focus {
    box-shadow: 0px 0px 73px 5px #09ae96;
}

如果您从共享样式块中删除 .textarea，您将看到 :focus 样式在未聚焦时消失。

【讨论】：

【解决方案2】：

.textarea

.textarea:focus
  box-shadow: 0px 0px 73px 5px primary-color

在您的 Stylus 代码中，.textarea 在 .textarea:focus 行之前没有应用任何样式。翻译为：.textarea, .textarea:focus。 这是因为Stylus interprets a newline as equivalent to selector separators (commas in a rule set).。

删除.textarea 以修复您的代码。

查看 Chrome 检查器：

【讨论】：