1. First-child (compatible with IE7), last-child (incompatible with IE8)

HTML:

<body> < H2 > list </h2> <ul> <li> list item1</li> <li> list items2</li> <li> list items3</li> <li> list items4</li>
  </ul>
</body>
Copy the code

CSS:

<style> ul {list-style: none; } li:first-child {/* Style the first list item to be IE7*/ compatible
      background-color: pink;
    }
    li:last-child { /* Styling the last list item is incompatible with IE8 */
      background-color: red;
    }
</style>
Copy the code

If you set a first-Child or last-Child ul list item, the first and last ul list items on a page will be styled.

2. Nth-child, nth-last-child (IE8 incompatible)

HTML:

<body> < H2 > list </h2> <ul> <li> list item1</li> <li> list items2</li> <li> list items3</li> <li> list items4</li> <li> list items5</li> <li> list items6</li>
  </ul>
</body>
Copy the code

CSS:

<style> ul {list-style: none; } li:nth-child(3) { /* Indicates that the third element of the li element IE8 is incompatible with */
      background-color: pink;
    }
    li:nth-last-child(2) { /* Indicates that the penultimate element of the li element IE8 is incompatible with */
      background-color: red;
    }
</style>
Copy the code

3. Use patterns for odd and even numbers

html:

<ul> <li> list items1</li> <li> list items2</li> <li> list items3</li> <li> list items4</li> <li> list items5</li> <li> list items6</li>
</ul>
Copy the code

CSS:

<style> ul {list-style: none; } li:nth-child(odd) {/* indicates that in the li element, the odd number starting from 1 is pink*/
      background-color: pink;
    }
    li:nth-child(even) {/* indicates that the li element, starting from 1, is gray */
      background-color: #ccc;
    }
</style>
Copy the code

Li :nth-child(odd) li:nth-child(odd) li:nth-child(odd) When the parent element is a list, there is no problem because there is only one subelement of the list item. When the parent element is a div, there is more than one child element, which can cause problems. For example, set the background color of the odd heading H2 in the div element

html:

<div> <h2> Article title A</h2> <p> I am A small paragraph... </p> <h2> Article title B</h2> <p> I am a small paragraph... </p> <h2> Article title C</h2> <p> I am a small paragraph... </p> <h2> Article title D</h2> <p> I am a small paragraph... </p> </div>Copy the code

css:

h2:nth-child(odd) {
      background-color: pink;
}
Copy the code

The execution result is as follows:

H2 :nth-child(odd); h2:nth-child(odd); Instead of styling all h2s that are even; Solution: NTH-of-type can avoid problems.

4. Nth-of-type (Incompatible with Internet Explorer 8) : Computes only elements of the same type

css:

h2:nth-of-type(odd) { /* All h2 tags are odd set style */
    background-color: pink;
}
h2:nth-of-type(even) { /* All H2 tags for even Settings */
    background-color: #ccc;
}
Copy the code

H2 :nth-of-type(odd); h2:nth-of-type(odd) For h2 tags only, regardless of the parent element;

Li :nth-child(4n+1)

HTML:

<ul> <li> list items1</li> <li> list items2</li> <li> list items3</li> <li> list items4</li> <li> list items5</li> <li> list items6</li> <li> list items7</li> <li> list items8</li> <li> list items9</li> <li> list items10</li> <li> list items11</li> <li> list items12</li>
</ul>
Copy the code

CSS:

<style> ul {list-style: none; } li:nth-child(4n+1) { /* indicates that the li element has four Li in a group of loops. The first li is set to */
      background-color: red;
    }
    li:nth-child(4n+2) { /* indicates that the li element has four Li in a loop and the second li is set to */
      background-color: pink;
    }
    li:nth-child(4n+3) {
      background-color: #ccc;
    }
    li:nth-child(4n+4) {
      background-color: yellow;
    }
</style>
Copy the code

The four li elements are a set of loops. 4n+1 meaning: the first style in this set of loops; 4n+2 Meaning: the second style in this set of loops;

4n+3 Meaning: the third style in this set of loops; 4n+4 Meaning: the fourth style in this set of loops;

Develop reading

  • Support for CSS3 attributes in IE9