在 SASS 嵌套中使用“:not”伪类

Question

我正在尝试将一些普通的 CSS 转换为 SCSS 以便我可以利用嵌套。下面的代码是我想为一堆表单字段输入类型定义样式的示例。在下面的普通 CSS 中，我设置了默认值，加上字段的 :focus 状态。除了一个特定的表单字段（我的全局 header 中的一个搜索字段），我在其中使用 :not 否定 pseudo-class 选择器。

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea {
    border: 2px solid #c3cbd6;
}

input.text:focus, 
input.title:focus, 
input[type=email]:focus, 
input[type=password]:focus, 
input[type=tel]:focus, 
input[type=text]:not(div.global-search > form > div > input.et_pb_s):focus, 
select:focus, 
textarea:focus {
    border: 2px solid #008ed4;
}

这是我对第一个块的嵌套 SCSS 的转换：

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea {
    border: 2px solid #c3cbd6;
    
    &:focus {
        border: 2px solid #008ed4;
    }
}

但是第二个 CSS 块转换为 SCSS 比较棘手，因为我正在使用 :not 选择器排除搜索字段的焦点状态与所有其他形式一样。

我如何在 SCSS 中执行此操作？

Answer 1

分离输入[type=text]的SCSS，并用:not选择器写入

input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
select, 
textarea {
    border: 2px solid #c3cbd6;
    
    &:focus {
        border: 2px solid #008ed4;
    }
}

input[type=text] {
 &:not(div.global-search > form > div > input.et_pb_s) {
 &:focus {
        border: 2px solid #008ed4;
 }
}
}

在 SASS 嵌套中使用“:not”伪类

Use ":not" pseudoclass within SASS nesting

html

javascript

css

jquery

sass