Negative pseudo-class of CSS structural pseudo-class selector: not()

Structural pseudo-class selectors are pseudo-class selectors for HTML hierarchical structures.

Commonly used structured pseudo-class selectors include:

:root selector, :not selector, :only-child selector, :first-child selector, :last-child selector,

:nth-child selector, :nth-child(n) selector, :nth-last-child(n) selector, :nth-of-type(n) selector,

:empty selector, :target selector.

These are basically commonly used, and I will focus on them today:否定伪类:not()

Negative pseudo-classes are particularly useful. In CSS, the :not selector is used to match each element that is not a specified element/selector. The syntax format is:

:not(selector)

For example: Suppose I want to select all divs except the container with id. Code below:

div:not(#container) {
    
    
 color: blue;
}

Negative pseudo-class: several characteristics of not():

1. The priority of :not() is 0, because its priority is determined by the parameters in the brackets;
2. The :not() pseudo-class can determine multiple selectors at the same time, such as input:not(:disabled):not(:read-only)
   {}, indicating no matching An input element that is disabled and is not read-only;
3. not() supports multiple expressions, such as: .cs-li:not(li, dd)
   {}, and there is another way of writing: .cs-li :not(li):not(dd) {}. However, these two writing methods must consider compatibility issues;
4. :not() also supports selectors, such as: input:not(.a > .b) { border: red solid; };

I encountered a problem today. I wanted to change other elements on the homepage except the logo to black and white. However, a very strange problem occurred when using negative pseudo-classes. Some other elements were still in color. The code is as follows:

.home div:not(.logo)
 {
    
    
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     filter: grayscale(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
     _filter:none; 
     filter: gray;
}

Then change it to: The effect is the same

.home div:not(.header > .logo)
 {
    
    
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     filter: grayscale(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
     _filter:none; 
     filter: gray;
}

Later, it worked if I changed it to another way of writing. The code is as follows:

.home div:not(.header):not(.logo)
 {
    
    
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter: grayscale(100%);
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; 
        filter: gray;
}

Later, I experimented and found that I need to write as many :not() as there are hierarchical relationships, for example:

<div class="header">
  <div class="box">
    <div class="logo"></div>
  </div>
</div>

It would be written as:

.home div:not(.header):not(.box):not(.logo)