Home >Web Front-end >Front-end Q&A >How to add styles to specified li in css
How to add styles to specified li in css
- 青灯夜游Original
- 2022-09-02 19:35:154179browse
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.
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>
Method 2: Use the :last-child selector to add style to the last li
li:last-child{
background:pink;
}
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;
}
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;
}
Similarly, if you select an odd number element, then
(or use odd); if you want to select an even number element, then it should be written as 2n 2 (or use even); <pre class="brush:css;toolbar:false">li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(even){
background:green;
}</pre>
:nth-child(n)
The selector matches the Nth child element that belongs to its parent element, regardless of The type of element. <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>
The parameters inside can be formulas or keywords Odd (odd number) and even (even number) <pre class="brush:php;toolbar:false">li:nth-child(odd){
background:red;
}
li:nth-child(2n+2){
background:pink;
}</pre>
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!