What pseudo-class selectors are there in CSS3, and how to use the pseudo-class selector nth-child()

The new attributes in CSS3 bring us a lot of convenience, such as the pseudo-class selector nth-child(), but it is not supported by IE6-8 and FF3.0-browsers, nth-of in CSS3 -type(n) (such as nth-of-type(1)) is a special class selector that can set more personalized titles and paragraphs. However, currently nth-of-type(n) only supports Firefox 3, opera, Some browsers such as safari and chrome.

:nth-child() selects one or more specific child elements of an element; you can select this way:

:nth- child(length);/*The parameter is a specific number and length is an integer*/

:nth-child(n);/*The parameter is n, n is calculated from 0*/

: nth-child(n*length)/*Select multiples of n, n starts from 0*/

:nth-child(n length);/*Select the element after length that is greater than length*/

:nth-child(-n length)/*Select the element before length that is less than length*/

:nth-child(n*length 1);/*Indicates selecting every other element*/

Example:

li:nth-child(3){background:orange;}/*Set the background of the third li to orange*/

li:nth- child(3n){background:orange;}/*Set the background of the 3rd, 6th, 9th,..., all multiples of li to orange*/

li:nth-child(n 3){background:orange;}/*Select the li background behind the third element to be orange*/

li:nth-child(-n 3){background:orange;}/*Select Set the background to orange from the li in front of the third element*/

li:nth-child(3n 1){background:orange;}/*This method is to achieve the effect of selecting one from several* /

:fist-child selects the first child element of an element

Example:

li:first-child {background: green ;}/*Set the background of the first li to green*/

:last-child selects the last child element of an element

Example:

li:last-child {background: green;}/*Set the background of the last li to green*/

:nth-last-child() select an element One or more specific child elements, starting from the last child element of this element

:nth-last-child() selector is very similar to the previous:nth-child() , but there is an extra last here, so its function is different from the previous ":nth-child". It only needs to count from the last element to select a specific element.

Example:

li:nth-last-child(4) {background: red;}/*Set the background of the fourth last li to red*/

:nth-of-type() selects the specified element

:nth-of-type is similar to :nth-child, except that it only counts the one specified in the selector Element, in fact, our previous examples all specified specific elements. This selector is mainly useful for locating elements that contain many different types of elements. For example, there are many p elements, li elements, img elements, etc. under our div.demo, but I only need to select the p element and let every other p element have a different style. Then we can simply write:

p:nth-of-type(even) {background-color: lime;}

In addition to setting n to odd (even number) or even (odd number), you can also set n is set to an expression, for example, nth-of-type(3n 2)

:nth-last-of-type() selects the specified element and starts counting from the last element

Needless to say, everyone can imagine this selector. It is used the same as the previous :nth-last-child, except that it refers to the type of element.

Also in IE6-8 and FF3.0 - browsers do not support this selector

: first-of-type selects the first similar child under a superior element Element;

:last-of-type selects the last similar child element of a superior element;

:nth-of-type,:nth- last-of-type;:first-of-type and :last-of-type are not very meaningful in practice. Selectors such as :nth-child we mentioned earlier can achieve this function, but if you are interested You can still find out. I personally think the practical value is not very great. Such statements are for reference only.

:only-child means that an element is the only child element of its parent element

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

If I need to have only one p element in ul, Change the style of this li, then we can now use: only-child, such as:

ul li {padding-left:10px;}

ul li:only-child {padding- left:15px}

:only-of-type selects an element that is the only child element of the same type as its superior element

means that an element has There are many sub-elements, and only one of them is unique, then we can use this selection method to select the only sub-element, for example

<section>
<h2>伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

If we want to only select h2 above Element, we can write like this,

h2:only-of-type{color:red;}

:empty There is no content in the selected element

:empty is used to select elements without any content. No content here means no content at all, even a space. For example, you have three paragraphs, one of which has nothing and is completely empty. Yes, if you want this p not to be displayed, then you can write it like this:

p:empty {display: none;}

The above is the detailed content of What pseudo-class selectors are there in CSS3, and how to use the pseudo-class selector nth-child(). For more information, please follow other related articles on the PHP Chinese website!