1, 首先, 打开 html 编辑器, 新建 HTML 文件, 例如: index.HTML.
2, 在 index.HTML 中的 < style > 标签中, 输入 CSS 代码: li:not(.test) {color: blue}.(相关课程推荐: CSS 视频教程)
3, 浏览器运行 index.HTML 页面, 此时包含 test 类元素的 li 标签不会触发设置蓝色字体样式的 CSS 代码.
CSS 扩展知识
CSS 否定 CSS 伪类 :not() 匹配不符合一组选择器的元素, 它有时也被称为反选伪类 (negation pseudo-class). 不能包含另外一个否定选择器.
- /* Selects any element that is NOT a paragraph */
- :not(p) {
- color: blue;
- }
注意:
● :not() 不支持在其参数中使用其他伪类. 例如, h1:not(p:first-of-type) 不能匹配任何元素, 包括 <h1>.
● 可以利用这个伪类写一个完全没有用处的选择器. 例如, :not(*) 匹配任何非元素的元素, 因此, 这个规则将永远不会被应用.
● 可以利用这个伪类提高规则的优先级. 例如, #foo:not(#bar) 和 #foo 会匹配相同的元素, 但是前者的优先级更高.
● :not(.foo) 将匹配任何非 .foo 的元素, 包括 <HTML> 和 <body>.
● 这个选择器只会应用在一个元素上, 无法用它来排除所有父元素. 比如, body :not(table) a 依旧会应用到表格元素 <table> 内部的 <a> 上, 因为 <tr > 将会被 :not(table) 这部分选择器匹配.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14469.html