css3 selector (2)_html/css_WEB-ITnose
Connect to css3 selector (1)
8. Structural pseudo-class selector [:nth-child(n)]:nth-child(n) selector is used for matching One or more specific child elements of a parent element, just like in jquery.
where "n" is its parameter, and can be an integer value (1,2,3,4), an expression (2n 1,-n 5) and a keyword (odd [odd number] , even [even number]), but the starting value of parameter n is always 1, not 0. In other words, when the value of parameter n is 0, the selector will not select any matching elements.
Note:When n in the ":nth-child(n)" selector is an expression, where n is calculated starting from 0, when When the value of the expression is 0 or less than 0, no matching elements are selected. As shown in the following table:
So it is very easy to achieve the effect of zebra crossing.
Even rows turn orange, ol > li:nth-child(2n|even){background:orange};
Odd rows turn green, ol > li:nth-child( 2n 1|2n-1|odd){background: green;}
9. Structural pseudo-class selector [:nth-last-child(n)]: nth-last-child(n) and :nth-child(n) is similar, but there is an extra last. This last means from back to front, and there is no difference in other places.
Example: Set the background color of the fifth to last list item in the list to orange.
<style type="text/css"> ol > li:nth-last-child(5){ background: orange;}</style><ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li></ol>:first-of-type selector is similar to: first-child selector, The difference is that specifies the type of element , which is mainly used to locate the first child element of a certain type under a parent element.
Personally, I think this: first-of-child is a subdivision of: first-child, which is the icing on the cake.
For example: set a style for the first p element in the div container.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style type="text/css"> /*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/ p:first-child{ color: red; } /*此时不用first-of-type,更待何时*/ p:first-of-type{ color: blue; } </style> </head> <body> <div class="wrapper"> <div>第一个子元素是div元素</div> <div>第二个div元素</div> <p>第一个p元素</p> <p>第二个p元素</p> </div> </body> </html>For this: first-of-type, I really think this name is very inappropriate. There is no obvious child to indicate the first of the type. For child elements, it is more appropriate to call it: first-type-child, just like what was said above: nth-last-child(n) is an extension of nth-child(n).
11. [:last-of-type] selector: The last-of-type selector has the same function as :first-of-type. The difference is that it matches the element under the parent element. The last child element of a type.
Example: Set the background of the last Div element in the container "div.wrapper" to orange.
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:last-of-type{ background: orange;}</style></head> <body><div class="wrapper"> <div>我是第一个Div元素</div> <div>我是第二个Div元素</div> <div>我是第三个Div元素</div> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p></div></body></html>Another of-type, see You should understand by now that this:nth-of-type(n) is an extension of the :nth-child(n) selector and only counts child elements of a certain type specified in the parent element. When the child elements in an element are not of the same type, it is convenient to use the :nth-of-type(n) selector to match child elements of a specific type in the parent element.
Example: Set the background color of even-numbered paragraphs to orange
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>属性选择器</title><style type="text/css"> .wrapper>p:nth-of-type(even){ background-color:orange; }</style></head> <body><div class="wrapper"> <div>我是一个Div元素</div> <p>我是一个段落元素</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p></div></body></html>:nth-last-of-type(n) and :nth-of-type(n) selector select a certain sub-element type specified in the parent element, but its The starting direction is from the last child element, and the usage method is the same as: nth-last-child(n).
Example: Set the background of the third to last paragraph in the container "div.wrapper" to orange.
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > p:nth-last-of-type(3){ background: orange;}</style></head> <body><div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p></div></body></html>:only-child, it selects an element at first glance. And the element is the only child element of its parent element.
Example:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.post p { background: green; color: #fff; padding: 10px;}.post p:only-child { background: orange;}</style></head> <body><div class="post"> <p>我是一个段落</p> <p>我是一个段落</p></div><div class="post"> <p>我是一个段落</p></div></body></html>:only-of-type selector It is an extension of :only-child, which selects a child element of a certain type, and the child element is the only selector of this type among its parent elements.
Example: Modify the background color of only one div element in the container to orange.
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:only-of-type { background: orange;}</style></head> <body><div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div></div></body></html>
starof, the author of this article, because knowledge itself is changing, the author is also constantly learning and growing. The content of the article is also updated from time to time. In order to avoid misleading readers and facilitate tracing the source, please reprint and indicate the source: If you have any questions, please feel free to discuss with me and make progress together.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
