How to make the first li unstyled with css-Front-end Q&A-php.cn

How to make the first li unstyled with css

青灯夜游

Release： 2022-09-02 19:02:53

Original

2192 people have browsed it

In CSS, leaving the first li unstyled means excluding the first li and adding styles to other li elements. 3 methods: 1. Use ":not()" and ":first-child", the syntax is "element:not(:first-child){style}"; 2. Use ":nth-of-type", the syntax "Element:nth-of-type(n 2){style}"; 3. Use ":nth-child", the syntax is "Element:nth-child(n 2){style}".

How to make the first li unstyled with css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Let the first li not be styled, which is to add styles to other li except the first li.

3 implementation methods

Method 1: Use selectors: not() and: first-child

Use:first-child to select the first element
Then use :not() to match the non-first element Other elements of child elements

Example: Let the first li not add a red background style, and add a red background to other li elements except the first li element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li{
				float: left;
				height: 50px;
				line-height: 50px;
				width: 50px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			li:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>

Copy after login

How to make the first li unstyled with css

Description:

:not(selector) The selector matches every element that is not the specified element/selector.
:first-child Selector The specified selector is used to select the first child element that belongs to its parent element.

Method 2: Use :nth-of-type()

:nth-of- type(n) The selector matches every element that is the Nth child element of a specific type of the parent element.

n starts from 0, then n 2 is naturally Start with the 2nd element.

li:nth-of-type(n+2){
background:pink;
}

Copy after login

How to make the first li unstyled with css

Similarly, if you select an odd number element, then is 2n 1; if you want to select an even number element, then it should be written as 2n 2;The specific situation can be used according to the project situation.

li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(2n+2){
background:green;
}

Copy after login

How to make the first li unstyled with css

Method 3: Use :nth-child()

:nth-child(n ) selector matches the Nth child element that belongs to its parent element, regardless of the element's type.

For method 3 and method 2 types, just set the value of () to "n 2".

li:nth-child(n+2){
background:green;
}

Copy after login

How to make the first li unstyled with css

Similarly, if you want to select odd-numbered elements, then it is 2n 1; if you want to select even-numbered elements, then you should write 2n 2;The specific situation can be used according to the project situation.

li:nth-child(2n+1){
	background:green;
}
li:nth-child(2n+2){
	background:pink;
}

Copy after login

How to make the first li unstyled with css

（Learning video sharing: Getting started with web front-end）

The above is the detailed content of How to make the first li unstyled with css. For more information, please follow other related articles on the PHP Chinese website!