css 选择器汇总

目录

• 所有选择器
• 伪类选择器

所有选择器

选择器	用法
id选择器	#myid
类选择器	.myclassname
标签选择器	div,h1,p
相邻选择器	h1+p
子选择器	ul > li
后代选择器	li a
通配符选择器	*
属性选择器	a[rel="external"]
伪类选择器	a:hover, li:nth-child

伪类选择器

在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。

定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。

主要语法如下：

编号	语法	含义
1	E:first-child	匹配父元素中的第一个子元素E
2	E:last-child	匹配父元素中最后一个E元素
3	E:nth-child(n)	匹配父元素中的第n个子元素E
4	E:first-of-type	指定类型E的第一个
5	E:last-of-type	指定类型E的最后一个
6	E:nth-of-type(n)	指定类型E的第n个

区别(:nth-child(n) 和 :nth-of-type(n))

:nth-child(n) 和 :nth-of-type(n) 都是 CSS 中的伪类选择器，用于根据它们在父元素中的位置来选择特定的元素。然而，它们之间有一个关键的区别：

:nth-child(n)

这个选择器会选择父元素的第 n 个子元素，无论子元素的类型是什么。它根据元素在父元素中的位置来选择，而不考虑元素的类型。这意味着如果一个父元素有多个不同类型的子元素（例如 div, p, span），:nth-child(n) 会选择第 n 个出现的子元素，无论它的具体类型。

:nth-of-type(n)

相比之下，:nth-of-type(n) 选择器会根据元素的类型来选择特定位置的子元素。它只计算与目标元素相同类型的兄弟元素，并选择其中的第 n 个。例如，如果你想选择所有 p 标签中的第二个，你将使用 p:nth-of-type(2)，这将跳过任何非 p 类型的兄弟元素。

示例:

<div id="parent">
  <p>Paragraph 1</p>
  <div>Div 1</div>
  <p>Paragraph 2</p>
  <div>Div 2</div>
  <p>Paragraph 3</p>
</div>

/* 使用 :nth-child(n) */
#parent > *:nth-child(2) {
  color: red;
}

/* 使用 :nth-of-type(n) */
#parent > p:nth-of-type(2) {
  color: blue;
}

在上述示例中：

*:nth-child(2) 将选择 #parent 内部的第二个子元素，这里是 div（"Div 1"），并将其文本颜色设置为红色。

p:nth-of-type(2) 将选择 #parent 内部的第二个

元素（"Paragraph 2"），并将其文本颜色设置为蓝色。

总结来说，:nth-child(n) 关注位置，而 :nth-of-type(n) 关注类型和位置。在实际应用中，选择合适的选择器取决于你想要根据元素的类型还是单纯的位置来选择元素。