6-3 CSS3 结构性伪类选择器—not
本节编程练习不计算学习进度,请电脑登录imooc.com操作

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>  ​

演示结果:

任务

在CSS编辑器的第五行输入代码,除页脚”div#footer”之外的所有div设置橙色背景色。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>结构性伪类选择器—not</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="header">页头</div>
  10. <div id="page">页体</div>
  11. <div id="footer">页脚</div>
  12. </body>
  13. </html>
  1. div{
  2. padding: 10px 20px;
  3. min-height: 50px;
  4. }
  5. div ?([id="footer"]){
  6. background: orange;
  7. }
下一节