1. 程式人生 > >【CSS3】結構性偽類選擇器—not

【CSS3】結構性偽類選擇器—not

:not選擇器稱為否定選擇器,和jQuery中的:not選擇器一模一樣,可以選擇除某個元素之外的所有元素。就拿form元素來說,比如說你想給表單中除submit按鈕之外的input元素新增紅色邊框,CSS程式碼可以寫成:

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

相關HTML程式碼:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>  ​

演示結果: