• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :not()

    版本:CSS3

    CSS 伪类:not()用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类。

    示例

    /* 选择所有不是段落(p)的元素 */
    
    :not(p) {
      color: blue;
    }
    

    语法:

    E:not(s){sRules}

    匹配不含有s选择符的元素E。:not()伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或伪元素。

    注意:
    • :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)这部分选择器匹配。

    浏览器支持

    IE9以及新版本浏览器均支持:not()选择器。

    示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    p{
    color:pink;
    }
    
    :not(p){
    color:skyblue;
    }
    </style>
    </head>
    <body>
    
    <h1>这是一个标题</h1>
    
    <p>这是一个段落.</p>
    <p>这是另一个段落.</p>
    
    </body>
    </html>

    效果图:

    CSS 否定CSS伪类:not()匹配不符合一组选择器的元素,它有时也被称为反选伪类negation pseudo-class)。不能包含另外一个否定选择器。

    /* selects any element that is not a paragraph */
    :not(p) {
      color: blue;
    }
    
    //HTML
    
    <p>我是一个段落。</p>
    <p class="fancy">我好看极了!</p>
    <div>我不是一个段落。</div>
    
    //CSS
    
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }
    
    /* 类名不是 `.fancy` 的 <p> 元素 */
    p:not(.fancy) {
      color: green;
    }
    
    /* 非 <p> 元素 */ 
    body :not(p) {
      text-decoration: underline;
    }
    
    /* 既不是 <div> 也不是 <span> 的元素 */
    body :not(div):not(span) {
      font-weight: bold;
    }
    
    /* 类名不是 `.crazy` 或 `.fancy` 的元素 */
    /* 注意,此语法尚未获广泛支持。 */
    body :not(.crazy, .fancy) {
      font-family: sans-serif;
    }
    

    上篇::lang()

    下篇::target