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