A.非伪类示例 B.焦点在 CSS 伪类中

A.语法如上所示。

以下选择器匹配 HTML 文档中未禁用且没有类 .example 的所有 <input> 元素：

HTML：

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS：

input:not([disabled]):not(.example){
   background-color: #ccc;
}

:not() 伪类还将支持选择器级别 4 中逗号分隔的选择器：

CSS：

input:not([disabled], .example){
   background-color: #ccc;
}

JSBin 现场演示

见背景的语法在这里 。

B.：焦点 - 在 CSS 伪类中

HTML：

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS：

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}