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;
}