docs-web-css-selector.md

title	tags	created	modified
docs-web-css-selector	css docs web	2020-07-25T12:20:19.299Z	2020-07-25T12:20:37.613Z

docs-web-css-selector

:first-of-type pseudo-class

• represents the first element of its type among a group of sibling elements.
• article :first-of-type { background-color: pink; }
• article *:first-of-type { background-color: pink; }
  • This example shows how nested elements can also be targeted.
  • Note that the universal selector ( * ) is implied when no simple selector is written.
  • 会修改所有不同类型元素的第一个元素的样式

::before pseudo-elements

• In CSS, ::before creates a pseudo-element that is the first child of the selected element.
• It is often used to add cosmetic(表面的) content to an element with the content property.
• It is inline by default.
• The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img> , or to <br> elements.

:nth-child()

• The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

/* Selects the second <li> element in a list */
li:nth-child(2) {
  color: lime;
}

/* Selects every fourth element among any group of siblings */
:nth-child(4n) {
  color: lime;
}

/* select the odd rows of an HTML table: 1, 3, 5, etc.*/
tr:nth-child(odd) or tr:nth-child(2n+1)