【CSS】css选择器大全

CSS选择器

大家都知道在css中我们可以美化html元素的样式，那么我们该怎么选择要美化样式的html元素呢？这时候就要提到css选择器了，css选择器的种类很多，常用的css选择器分为三种：1、基本选择器。2、伪元素选择器。3、伪类选择器。

一 基本选择器

在CSS中，基本选择器是用于选择HTML文档中所有匹配指定条件的元素的选择器。以下是一些常见的基本选择器：

1 元素选择器

元素选择器通过元素的标签名来选择元素。例如，选择所有段落元素可以使用p选择器：

	p {
	/*css样式*/
	}

元素选择器中的特例为 *{ } ，表示选择所有类型元素。

2 类选择器

类选择器通过元素的class属性值来选择元素。在HTML中，通过为元素添加class属性，并在CSS中使用“.”符号来表示类选择器。例如，选择class为"example"的元素：

	.example {
	  	/* CSS样式 */
	}

元素选择器与class选择器结合时没有空格，元素定义时多类名用空格隔开。如下：

	div .example {
	  	/* CSS样式 */
	}

	.example .box{
	  	/* CSS样式 */
     }

3 ID选择器

ID选择器通过元素的id属性值来选择元素。在HTML中，通过为元素添加唯一的id属性，并在CSS中使用 # 符号来表示ID选择器。例如，选择id为"header"的元素：

	#header {
	  	/* CSS样式 */
	}

4 属性选择器

通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。ID选择器可以看作属性选择器的一种。
例如选择类型为button的<input>元素：

	input[type = "button"]{
		/* CSS样式 */
	}

其中等号“=”为严格等于，其余运算符还有：1、“^=”：表示前缀。2、“$=”：表示后缀。3、“*=”：表示包含。通过使用不同运算符可以匹配的多个属性。

5 后代选择器

后代选择器通过元素的嵌套关系来选择元素。使用空格来分隔两个元素，表示选择第一个元素内部的所有第二个元素。例如，选择所有div内部的span元素：

	div span {
	  	/* CSS样式 */
	}

6 子元素选择器

子元素选择器是CSS中的一种选择器，用于选择某个元素的直接子元素。子元素选择器使用大于号（>）来表示，它只会选择作为指定元素的直接子元素的元素，而不会选择更深层次的后代元素。
如下所示：

	<div class="parent">
	  <p>子元素1</p>
	  <div>
	    <p>子元素2</p>
	  </div>
	</div>

	.parent > p {
	  /* CSS样式 */
	}

在上面的示例中，只有<p>子元素1</p>会被选中，而<p>子元素2</p>不会被选中，因为它是.parent元素的间接子元素而不是直接子元素。

7 兄弟选择器

兄弟选择器分为通用兄弟选择器和紧邻兄弟选择器。
通用兄弟选择器用波浪号（~）表示，用于选择指定元素后面的所有兄弟元素(具有共同父级元素)。
紧邻兄弟选择器用加号（+）表示，用于选择紧接在指定元素后面的第一个兄弟元素。
如下为html元素，

<h2>标题1</h2>
<p>段落1</p>
<h3>标题2</h3>
<p>段落2</p>

选择h2后的所有p标签：

	h2 ~ p {
	  	/*CSS样式*/
	}

选择h2后的第一个p标签：

	h2 + p {
	  	/*CSS样式*/
	}

注意只能向下查找兄弟，无法向上查找。

8 选择器组合

如果想让两种不同元素具有相同的样式，那么就可以使用选择器组合进行实现：h2, p {color:gray;}。效果为使h2元素和p元素中的颜色变为灰色。选择器组合通过 “,” 实现，可以将任意选择器组合到一起，没有数量限制，这样可以得到更简洁的样式表。

二 伪元素选择器

伪元素选择器（Pseudo-element Selector）是CSS中用于选择元素的特定部分或位置的选择器。伪元素选择器以双冒号（::）开头，用于向元素的特定部分添加样式，而不需要在HTML中添加额外的标记。
以下是一些常见的伪元素选择器：

1 首字符伪元素选择器 ::first-letter{}

“::first-letter”伪元素用于选择指定元素的第一个字母。例如设置段落的第一个字母为大写。

	p::first-letter {
	  	font-size: 150%;
	}

2 首行伪元素选择器 ::first-line

“::first-line”伪元素用于选择指定元素的第一行文本。
例如设置段落的第一行文本为粗体

p::first-line {
  font-weight: bold;
}

3 自定义内容前置伪元素选择器 ::before

“::before”伪元素用于在指定元素的内容之前插入内容。
例如在每个<p>元素前插入内容“author: ”

	p::before {
	  	content: "author: ";
	}

4 自定义内容后置伪元素选择器 ::after

“::after”伪元素用于在指定元素的内容之后插入内容。
例如在每个链接后面插入箭头符号“➜”

	a::after {
	  	content: " ➜";
	}

三 伪类选择器

伪类选择器（Pseudo-class Selector）是CSS中用于选择处于特定状态的元素的选择器。伪类选择器以冒号（:）开头，用于为元素在特定状态下应用样式，例如鼠标悬停、被点击、被选中等状态。
以下是一些常见的伪类选择器：

1 结构性伪类选择器

（1）:nth-child()

“:nth-child()”伪类选择器用于选择父元素的特定位置的子元素。括号内参数可以说数字、公式以及odd(奇数)、even(偶数)。
例如选择<ul>中的第一个元素<li>：

	ul:nth-child(1) {
		/*CSS样式*/
	}

:nth-child(1)等价于:first-child 选择第一个元素。

（2） :nth-last-chlid()

与:nth-child类似，:nth-last-child()的参数也可以是数字、公式、odd、even，区别为:nth-last-child()从后向前选择。
:nth-last-child(1)等价于:last-child 选择最后一个元素。

（3）:nth-of-type()

:nth-of-type() 伪类选择器用于选择父元素下特定类型的子元素。它允许您选择同一类型的元素中的第几个元素，而不管这些元素是父元素的第几个子元素。参数同上，也可以为数字、公式、odd、even。

例如要选择 ul 元素下的第三个 li 元素，可以使用以下 CSS 代码：

	li:nth-of-type(3) {
	  	/*CSS样式*/
	}

:nth-of-type(1)等价于:first-of-type选择第一个对应类型元素。

（4）:nth-last-of-type()

同理，与:nth-of-type()类似，:nth-last-of-type()的参数也可以是数字、公式、odd、even，区别为:nth-last-of-type()从后向前选择。
:nth-last-of-type等价于:last-of-type选择最后一个对应类型元素。

2 UI状态伪类选择器

（1）:hover

“:hover” 伪类选择器用于选择鼠标悬停在元素上时的状态。
示例：鼠标悬停在链接上时改变颜色：

a:hover {
  color: red;
}

（2）:focus

“:focus” 伪类选择器用于选择元素获得焦点时的状态。
示例：输入框获得焦点时添加边框样式：

input:focus {
  border: 1px solid blue;
}

（3） :checked

“:checked” 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
示例：为所有选中的输入元素设置宽度高度：

input:checked {
    height: 50px;
    width: 50px;
}

（4） :disabled

“:disabled” 选择器匹配每个禁用的的元素（主要用于表单元素）。
示例：设置所有type="text"的禁用的输入元素的背景颜色：

input[type="text"]:disabled
{
background:#dddddd;
}

3 其他伪类选择器

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
示例：为每个并非

元素的元素设置背景颜色：

:not(p)
{
background:#ff0000;
}

选择器优先规则

在CSS中，选择器的优先级决定了样式规则的应用顺序。当多个选择器同时应用于同一个元素时，CSS会根据选择器的优先级来确定应用哪个样式规则。CSS选择器的优先级从高到低依次为：

• 1!important：使用 !important 标记的样式具有最高的优先级，会覆盖其他样式规则。
• 2 内联样式：直接在 HTML 元素的 style 属性中定义的样式具有较高的优先级。
• 3 ID 选择器：通过 ID 选择器选择的元素具有较高的优先级。
• 4 类选择器、属性选择器、伪类选择器：通过类选择器、属性选择器或伪类选择器选择的元素具有一般的优先级。
• 5 元素选择器、伪元素选择器：通过元素选择器或伪元素选择器选择的元素具有较低的优先级。
• 6 通用选择器：通用选择器*{ }优先级最低。

结语

本文介绍了CSS中常用的各种选择器及其使用方法以及选择器的优先规则，如有争议，欢迎大佬们讨论。