What is :not()? Simple use of :not()

This article will introduce to you: What is not()? The simple use of :not() lets everyone understand how :not() is used. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

:not() is a negative pseudo-class selector of CSS. It is a functional pseudo-selector that takes a simple selector (shown below) as an argument and then matches one or more elements that are not represented by arguments.

What can be used as :not() parameter can be any of the following simple selectors:

1. Tag selector (such as p, span, etc.)

2 , class selection (such as .element, .sidebar, etc.)

3, ID selector (such as #header)

4, pseudo-class selector (such as: first-child, :last- of-type)

5. Attribute selector (such as [type="checkbox"])

6. Universal selector (*)

However, pass to: The parameter of not() cannot be a pseudo-element selector (such as ::before, ::after, etc.) or another negative pseudo-class selector.

Therefore, the following are invalid :not() values:

/* 无效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

As can be seen from the above example, :not() cannot be nested, for example:not(:not(.. )). It cannot be nested in the :matches() pseudo-class, for example: selector(:matches(:not(..))).

As mentioned before, the :not() selector will match elements that are not represented by the selector in its argument. So, this css statement: :

li:not(.new) {    
  /* 所有样式列表项，除了具有新类的项之外*/
}

will select all list items except the list items with .new class name.

:not() selections can be chained to more :not() selections. For example, the following will match all #featureds of article except the ID, and will then filter out articles with class names.tutorial:

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}

:not() can also be linked with other pseudo-classes and pseudo-elements . For example, the following will add the word "new!" to .old using the ::after pseudo-element to list items without a class name:

li ：not（.old）:: after {     
   content：“New！” ;    
   color：deepPink;
}

Description:

:not() pseudo-class selection is allowed Write useless selection. For example: not(*), it does not mean at all that no style will ever be applied to any element.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of What is :not()? Simple use of :not(). For more information, please follow other related articles on the PHP Chinese website!