What is the cssnot selector? Detailed explanation of the not() selector-CSS Tutorial-php.cn

What is the cssnot selector? Detailed explanation of the not() selector

云罗郡主

Release： 2018-11-19 10:27:41

Original

5510 people have browsed it

The content of this article is about what is the cssnot selector? A detailed explanation of the not() selector. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

not() selector

In CSS3, the :not() selector is mainly used to select all elements except a certain element. This is a very useful selector.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>CSS3 :not()选择器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style-type:none;}
        ul li:not(.first)
        {
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">php中文网</li>
        <li>php中文网</li>
        <li>php中文网</li>
        <li>php中文网</li>
    </ul>
</body>
</html>

Copy after login

The effect is as follows:

What is the cssnot selector? Detailed explanation of the not() selector

Analysis:

For "ul li:not(.first )" this selector, we look at it in two steps. The ".first" in the brackets means selecting the element with the class value first (i.e. the first li element), so "ul li:not (.first)" means Select all li elements under the ul element except the first li element.

If there is no: not() selector, it would be very troublesome for us to achieve the above effect, with a lot of redundant code. In fact: the idea of using the not() selector is similar to the idea of complement set in mathematics. The :not() selector is very practical and flexible in actual development.

The above is a complete introduction to the detailed explanation of the cssnot selector? not() selector. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is the cssnot selector? Detailed explanation of the not() selector. For more information, please follow other related articles on the PHP Chinese website!