16. 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>
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 16. CSS3 结构性伪类选择器 :not
码云笔记 » 16. CSS3 结构性伪类选择器 :not