结构性伪类选择器—not

来源:互联网 发布:淘宝卖药品 编辑:程序博客网 时间:2024/05/22 15:56

: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设置橙色背景色。

<!DOCTYPE www.dztcsd.comhtml>
<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="footer">页脚</div>
</body>
</html>

0 0
原创粉丝点击