Home > Article > Web Front-end > Can odd be used in CSS?
Can odd be used in CSS?
- 青灯夜游Original
- 2022-05-18 18:40:212791browse
odd can be used in CSS. In CSS, odd can be used as a keyword in a pseudo-class selector to select a specified element. It is often used as a parameter of the ":nth-child()" selector to select specified child elements of odd-numbered rows in the parent element. The syntax "specify" Child element:nth-child(odd){//css style}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
odd can be used in CSS.
odd means "odd number". In CSS, the specified element can be selected as a keyword in the pseudo-class selector.
odd is often used in conjunction with the ":nth-child(n)" selector as a parameter of the selector, used to select specified child elements of odd-numbered rows in the parent element
指定子元素:nth-child(odd){//css样式}Description : Relative to odd, there is also a keyword even (even number), which is used in conjunction with the ":nth-child(n)" selector to select the specified child element of the even-numbered row in the parent element
Example: Realize alternating row colors of the table
That is, one color for odd-numbered rows and one color for even-numbered rows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
tr:nth-of-type(even){
background:red;
}
tr:nth-of-type(odd){
background:pink;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<td>T恤</td>
<td>￥100</td>
</tr>
<tr>
<td>牛仔褂</td>
<td>￥250</td>
</tr>
<tr>
<td>牛仔库</td>
<td>￥150</td>
</tr>
</table>
</body>
</html>
Expand knowledge ：
:nth-child(n)The selector matches the nth child element in the parent element. The parameter is the index of the element. Index starts from 1.
n can be a number, a keyword, or a formula.
:nth-child is a useful selector provided by CSS3. Because it is often used in projects, its common methods are briefly summarized. The sample code screenshot below is used It’s the same example. The parent elements of the p element are all body
p:nth-child(2)
means adding a background color to the second p element. p:nth-child(3) is the third p element, and so on
p:nth-child(2)
Following the above example, if there are other elements in front of the p element here, the result is as shown below. Paragraph 1 is added with a background color, instead of paragraph 2 in the above example.
Because here p:nth-child(1) is an h1 element, so p:nth-child(2) is a p element
p:nth-child (3n)
means adding a background color to p elements that are multiples of 3. 2n is a multiple of 2, 4n is a multiple of 4, and so on
p:nth-child(odd)
means adding a background color to all odd p elements
p:nth-child(even)
Indicates adding a background color to all even p elements
Use formula (an b), description : Indicates the length of the cycle, n is the counter (starting from 0), b is the offset value
In addition, special attention should be paid to the fact that an must be written in front of b and cannot be written in the form of b an
Note: n in the formula is not case-sensitive
p:nth-child(2n 1)
It can be simply understood as equivalent to p:nth-child(odd)
##p:nth-child(2n 0)
p:nth-child(n 2)
p:nth-child(-n 5)
css video tutorial, web front-end)
The above is the detailed content of Can odd be used in CSS?. For more information, please follow other related articles on the PHP Chinese website!