Home >Web Front-end >CSS Tutorial >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:415532browse
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:
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!