CSS3否定伪类选择器

否定伪类选择器用来选择不满足某些条件的元素。

表 2-6 结构伪类选择器
选择器	功能描述	版本
E:not(selector)	选择未被选择器selector所选中，且类型为E的元素	3

如果想对某个结构元素使用样式，但是又想排除这个结构下的某些子结构时，否定伪类选择器就非常有用，它可以过滤掉某些内容。

如，在美化表单时，常常会给表单中所有的input添加一个边框，而单选按钮添加边框后就非常难看。这时，否定伪类就可以派上用场。代码如下：

input:not([type = radio]) {
border: 1px solid #ccc;
}

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS3否定伪类选择器相关推荐

html伪类选择器怎么使用,CSS3 :default伪类选择器使用简介
一.CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素. 举个例子,一个下拉框,可能有多个选项,我们默认会让某个处于 sel ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
css3 - 语言伪类选择器
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 4 <head> 5 <meta charset=&q ...
CSS基础(part20)--CSS3结构伪类选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案结构伪类选择器属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...
CSS3 :nth-child()伪类选择器
2019独角兽企业重金招聘Python工程师标准>>> 语法: :nth-child(an+b) :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型 ...
《图解CSS3：核心技术与案例实战》——2.4节动态伪类选择器
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第2章,第2.4节动态伪类选择器,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 2.4 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

CSS3否定伪类选择器

CSS3否定伪类选择器相关推荐

最新文章

热门文章