Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about whether odd can be used in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Odd can be used in CSS. In CSS, odd can select the specified element as a keyword in the pseudo-class selector, often as a parameter of the ": nth-child ()" selector, to select the specified child elements of odd rows in the parent element, and the syntax "specify child elements: nth-child (odd) {/ / css style}".

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

Odd can be used in CSS.

Odd means "odd", and in CSS, you can select a specified element as a keyword in a pseudo-class selector.

Odd is often used in conjunction with the ": nth-child (n)" selector as a parameter to select specified child elements of odd rows in the parent element

Specify child element: nth-child (odd) {/ / css style}

Description: compared to odd, there is also a keyword even (even), which is used in conjunction with the ": nth-child (n)" selector to select the specified child elements of even rows in the parent element.

Example: realize interlaced discoloration of a table

That is, one color for odd lines and one color for even lines.

Tr:nth-of-type (even) {background:red;} tr:nth-of-type (odd) {background:pink } commodity price T-shirt ¥100 cowboy coat ¥250 Cowboy library ¥150

Expand knowledge:

The nth-child (n) selector matches the nth child element in the parent element. Parameter is the index of the element. The index starts at 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 screenshot of the following sample code uses the same example. The parent element of p element is body.

P:nth-child (2)

Indicates 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 before the p element here, as shown in the following figure, paragraph 1 is added with a background color, instead of paragraph 2 with a background color.

Because p:nth-child (1) here is an H2 element, so p:nth-child (2) is a p element

P:nth-child (3n)

Adds a background color to the p element that represents a multiple of 3, where 2n is a multiple of 2, 4n is a multiple of 4, and so on

P:nth-child (odd)

Means to add a background color to all odd p elements

P:nth-child (even)

Means to add a background color to all even p elements

Using the formula (an + b), description: indicates the length of the period, n is the counter (starting at 0), b is the offset value

In addition, it should be noted that an must be written in front of b, not in the form of b+an

Note: the n in the formula is case-insensitive

P:nth-child (2n+1)

Can be simply understood as equivalent to p:nth-child (odd)

P:nth-child (2n+0)

Can be simply understood as equivalent to p:nth-child (even)

P:nth-child (nasty 2)

Indicates a positive range, adding a background color from the second p element (including the second p element) to the last p element (here the range refers to 2-5)

P:nth-child (- nasty 5)

Represents a negative range, adding a background color from the last p element (including the last element) to the first p element (here the range refers to 5-1)

These are all the contents of the article "can you use odd in CSS?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.