Home > Article > Web Front-end > What is the cssnot selector? Detailed explanation of the not() selector

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

云罗郡主Original: 2018-11-19 10:27:415487browse

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>

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!

php css3 class 选择器 ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the root selector? Detailed explanation of root selectorNext article：What is the root selector? Detailed explanation of root selector

See more

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

Related articles