Skip to content

docs-web-css-selector.md

Latest commit

 

History

History
executable file
·
43 lines (33 loc) · 1.43 KB

docs-web-css-selector.md

File metadata and controls

executable file
·
43 lines (33 loc) · 1.43 KB
Raw
title docs-web-css-selector
tags
css
docs
web
created 2020-07-25T12:20:19.299Z
modified 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)