[分享]css元素选择器大全

在CSS中，选择器是控制样式的关键。了解不同类型的选择器可以让我们更好地控制网页的样式。接下来，我们将对所有基本的CSS选择器进行简要介绍。 / 选择器列表： / / 元素选择器 / p {} / 类...

在CSS中，选择器是控制样式的关键。了解不同类型的选择器可以让我们更好地控制网页的样式。接下来，我们将对所有基本的CSS选择器进行简要介绍。

 /* 选择器列表： */

  /* 元素选择器 */
  p {}

  /* 类选择器 */
  .class {}

  /* id选择器 */
  #id {}

  /* 后代选择器 */
  parent child {}

  /* 相邻兄弟选择器 */
  sibling1 + sibling2 {}

  /* 后续兄弟选择器 */
  sibling1 ~ sibling2 {}

  /* 属性选择器 */
  [attribute] {}
  [attribute=value] {}
  [attribute~=value] {}
  [attribute|=value] {}
  [attribute^=value] {}
  [attribute$=value] {}
  [attribute*=value] {}

  /* 伪类选择器 */
  :active {}
  :hover {}
  :focus {}
  :link {}
  :visited {}
  :first-child {}
  :last-child {}
  :nth-child() {}
  :nth-last-child() {}
  :nth-of-type() {}
  :nth-last-of-type() {}
  :first-of-type {}
  :last-of-type {}
  :only-of-type {}
  :optional {}
  :required {}
  :disabled {}
  :enabled {}
  :checked {}

  /* 伪元素选择器 */
  ::before {}
  ::after {}
  ::first-letter {}
  ::first-line {}
  ::selection {} 

希望你在学习这些基本的CSS选择器后，能够更好地使用CSS控制你的网站的样式。这些选择器的各种组合可以让你创造出完美的样式。