css3 selector (2)_html/css_WEB-ITnose-HTML Tutorial-php.cn

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>

Copy after login

10. [:first-of-type] selector

: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>

Copy after login

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>

Copy after login

12. [:nth-of-type(n)] Selector

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>

Copy after login

13. [:nth-last-of -type(n)] selector

: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>

Copy after login

14. [:only-child] selector

: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>

Copy after login

15. [:only-of-type] selector

: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>

Copy after login

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.