CSS3結構性偽類選擇器not

結構性偽類選擇器—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>

演示結果：

index.html代碼：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>結構性偽類選擇器not</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="header">頁頭</div>
        <div id="page">頁體</div>
        <div id="fotter">頁腳</div>
    </body>
</html>

style.css代碼：

div{
    padding:10px 20px;
    min-height:20px;
}
    div:not([id="footer"]){
    background:orange;
}