How to add styles to specified li in css-Front-end Q&A-php.cn

How to add styles to specified li in css

青灯夜游

Release： 2022-09-02 19:35:15

Original

4117 people have browsed it

4 methods: 1. Use ":first-child" to add style to the first li, the syntax is "li:first-child{style code}"; 2. Use ":last-child" to add style to the first li. Add style to the last li with the syntax "li:last-child{style}"; 3. Use "li:nth-of-type(N){style code}" to add style to the Nth li; 4. Use " li:nth-child(N){style code}" adds style to the Nth li.

How to add styles to specified li in css

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

css selects the specified li and adds styles

Method 1: Use:first-childThe selector adds style to the first li

:first-child selector matches the first child element in its parent 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: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 add styles to specified li in css

Method 2: Use the :last-child selector to add style to the last li

## The #:last-child selector is used to match the last child element in the parent element.

li:last-child{
	background:pink;
}

Copy after login

How to add styles to specified li in css

Method 3: Use the :nth-of-type() selector to add style to the Nth li

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

li:nth-of-type(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-of-type(2){  /* 第2个li加样式 */
	background:pink;
}
li:nth-of-type(3){  /* 第3个li加样式 */
	background:green;
}

Copy after login

How to add styles to specified li in css

## The parameters in #()

can be formulas or keywords Odd (odd number) and even (even number) n 2 Start adding styles from the 2nd element.

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

Copy after login

How to add styles to specified li in css Similarly, if you select an odd number element, then

2n 1

(or use odd); if you want to select an even number element, then it should be written as 2n 2 (or use even); <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">li:nth-of-type(2n+1){ background:pink; } li:nth-of-type(even){ background:green; }</pre><div class="contentsignin">Copy after login</div></div>

How to add styles to specified li in css

Method 4: Use: The nth-child() selector adds style to the Nth li

:nth-child(n)

The selector matches the Nth child element that belongs to its parent element, regardless of The type of element. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">li:nth-child(1){ /* 第1个li加样式 */ background:red; } li:nth-child(3){ /* 第3个li加样式 */ background:pink; } li:nth-child(5){ /* 第5个li加样式 */ background:green; }</pre><div class="contentsignin">Copy after login</div></div>

How to add styles to specified li in css

()

The parameters inside can be formulas or keywords Odd (odd number) and even (even number)

li:nth-child(odd){ 
	background:red;
}
li:nth-child(2n+2){
background:pink;
}

Copy after login

(Learning video sharing:

web front-end)
The above is the detailed content of How to add styles to specified li in css. For more information, please follow other related articles on the PHP Chinese website!