个人博客：haichenyi.com。感谢关注
1. 目录
引言
什么是选择器？
CSS选择器是CSS（层叠样式表）中的一种规则 ，用于指定要应用样式的HTML元素。它们就像是指向网页中特定元素的指针，允许开发者选择并修改这些元素的外观和布局。通过选择器，开发者可以精确地定位网页中的元素，并为它们应用特定的样式规则，如颜色、字体、边距、边框等
简单的来说，就是用来给页面元素加样式的东西。比方说，我页面有一个div元素，这个元素需要显示多大？内容是文字，这个文字显示多大字号？文字显示成什么颜色？等等
在网页设计和开发中，CSS选择器扮演着至关重要的角色。它们是连接HTML结构和CSS样式的桥梁，使得开发者能够灵活地控制网页的外观和布局。通过使用选择器，开发者可以实现以下目标：
- 样式一致性：确保网页中的相同类型元素具有一致的样式，提高网页的整体美观性和可读性。
- 布局控制：精确地控制网页元素的排列和布局，创建出响应式、适应性强的网页。
- 交互体验：通过选择器，开发者可以为网页元素添加悬停、点击等交互效果，提升用户体验。
- 可维护性：使用选择器可以简化样式表的编写和维护，使得样式规则更加清晰、易于理解。
学习CSS选择器对于网页设计和开发者来说至关重要，原因如下：
- 基础技能：选择器是CSS的基础，掌握它们是学习更高级CSS技术和框架的前提。
- 提高效率：熟练掌握选择器可以显著提高编写样式表的效率，减少不必要的代码和调试时间。
- 灵活控制：选择器提供了丰富的选择方式，使得开发者能够精确地控制网页中的元素，实现复杂的布局和样式需求。
- 优化性能：合理使用选择器可以避免不必要的样式计算，提高网页的渲染性能。
- 适应变化：随着网页技术和设计趋势的不断变化，掌握选择器有助于开发者快速适应新的设计需求和用户行为。
种类
一共有五类选择器:基础选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器。
一丶基础选择器
基础选择器分为四类:元素选择器(标签选择器)，类选择器，ID选择器，通配符选择器
1.元素选择器(标签选择器)
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
/* 清除默认值 */
* {
margin: 0px;
padding: 0px;
}
/* 给页面中的所有p标签，设置字体为20px，字体颜色为aqua */
p {
font-size: 20px;
color: aqua;
}
</style>
</head>
<body>
<p>哈哈哈</p>
</body>
</html>
PS：效果图就不贴出来了，内容比较多，贴图的话，就需要贴太多的图了，上面的代码就是一个网页的全部代码，直接复制出去新建一个html文件，把代码放进去就能运行看效果了，后面的代码，都是只有样式和元素两部分。把样式放在style中，把元素放在body中就可以运行看效果了
2.类选择器
举例
<!--都只写样式和标签。不写其他内容-->
/* 给页面中所有标签class属性为hai-test的标签，添加背景色为红色 */
.hai-class-test{
background-color: red;
}
<div class="hai-class-test">海晨忆</div>
<div class="hai-class-test">林汐痕</div>
3.ID选择器
举例
/* 给页面中所有标签id属性为hai-id-test的标签，添加背景色为绿色，注意id选择器是#打头，类选择器是.打头 */
#hai-id-test {
background-color: green;
}
<div id="hai-id-test">海晨忆</div>
4.通配符选择器
举例
/* 给页面所有元素设置margin和padding都为0px，注意，通配符选择器就是*号 */
* {
margin: 0px;
padding: 0px;
}
二丶组合选择器
组合选择器分为:后代选择器，子选择器，相邻兄弟选择器，普通兄弟选择器，群组选择器
1.后代选择器
举例
/* 给页面中div标签下的所有子孙p标签，添加字体大小和颜色属性。h1标签下的p标签也会加。是所有子孙后台都会加。
注意，直接以标签打头，不需要.也不需要#，中间加空格
*/
div p {
font-size: 14px;
color: blue;
}
<div>
<p>海晨忆</p>
<h1>
<p>哈哈哈</p>
</h1>
<p>林汐痕</p>
</div>
2.子选择器
举例
/* 给ul下的直接li添加font-size为18px.也就是ul的子孩子是li的标签添加
"哈哈哈"所在的li是ul的孙子标签，所以不会给它加上font-size为18px的属性。
>符号，表示给左边标签的儿子标签，添加属性。
上面组合选择器的空格符号，表示给左边标签的所有子孙标签添加属性
*/
ul>li {
font-size: 18px;
}
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<div>
<li>哈哈哈</li>
</div>
</ul>
3.相邻兄弟选择器
举例
/* 给紧挨着h2后面的p标签，添加font-style属性。添加为斜体
必须要紧挨着(隔开也不行)，必须要在后面(前面不行)。
+符号，表示给紧挨着后面的兄弟元素，添加属性
*/
h2+p {
font-style: italic;
}
<p>哇哇哇</p>
<p>哇哇哇</p>
<h2>h2</h2>
<!-- <div>呜呜呜</div> -->
<p>哇哇哇</p>
<p>哇哇哇</p>
4.普通兄弟选择器
举例
/* 给h3后面所有兄弟的p标签，添加text-decoration属性。为下划线
必须是后面的，前面的不行
~表示给后面的兄弟元素，添加属性
*/
h3~p {
text-decoration: underline;
}
<p>h3的P</p>
<p>h3的P</p>
<h3>h3</h3>
<p>h3的P</p>
<p>h3的P</p>
5.群组选择器
举例
/* 给页面中用,隔开的所有标签加上属性
,表示给写的所有类型的标签，添加属性
*/
h4,
h5,
h6 {
color: blue;
}
<h4>h4标签</h4>
<p>哈哈哈</p>
<h5>h5标签</h5>
<div>哈哈哈</div>
<h6>h6标签</h6>
三丶属性选择器
属性选择器按照匹配规则分为:包含属性选择器，等于属性选择器，起始属性选择器，结尾属性选择器，子串属性选择器
1.包含属性选择器
举例
/* 给div元素，包含class属性的标签，字体变成红色
用法:元素[内容]，只要包含'内容'属性就行了
*/
div[class] {
color: red;
}
/* 元素[内容] 给div元素，包含class属性的标签，字体变成绿色
用法:元素[内容]，只要包含'内容'属性就行了
*/
div[aaa] {
color: greenyellow;
}
<div class="hai">海晨忆</div>
<div aaa="bbb">海晨忆</div>
<div>海晨忆</div>
2.等于属性选择器
举例
/* 给div元素，包含class属性，并且值为hai的标签，字体变成红色
用法:元素[内容='值']，内容和值都需要全部匹配
*/
div[class='hai'] {
color: red;
}
<div class="hai">海晨忆</div>
<div class="haidfsa">海晨忆</div>
<div>海晨忆</div>
3.起始属性选择器
举例
/* 给div元素，包含class属性，并且值以hai开头的标签，字体变成红色
用法:元素[内容^='值']
*/
div[class^='hai'] {
color: red;
}
<div class="hai">海晨忆</div>
<div class="haidfsa">海晨忆</div>
<div>海晨忆</div>
4.结尾属性选择器
举例
/* 给div元素，包含class属性，并且值以hai结尾的标签，字体变成红色
用法:元素[内容$='值']
*/
div[class$='hai'] {
color: red;
}
<div class="hai">海晨忆</div>
<div class="haidfsa">海晨忆</div>
<div class="haidfsahai">海晨忆</div>
<div>海晨忆</div>
5.子串属性选择器
举例
/* 给div元素，包含class属性，并且值包含hai的标签，字体变成红色
用法:元素[内容*='值']
*/
div[class*='hai'] {
color: red;
}
<div class="hai">海晨忆</div>
<div class="haidfsa">海晨忆</div>
<div class="haidfsahai">海晨忆</div>
<div class="dfhaisa">海晨忆</div>
<div>海晨忆</div>
四丶伪类选择器
伪类选择器大体可以分为三类:动态伪类选择器，结构伪类选择器，表单伪类选择器
1.动态伪类选择器
举例
.hai:visited {
color: blue;
}
.hai:hover {
color: red;
}
.hai:active {
color: black;
}
/* 默认未访问的情况下，超链接的颜色 */
a:link {
color: aqua;
}
/* 访问过的超链接的颜色 */
a:visited {
color: blue;
}
/* 鼠标滑过，超链接的颜色 */
a:hover {
color: orange;
}
/* 激活(鼠标点下，未松开)超链接的颜色 */
a:active {
color: red;
}
/* 以上几个动态伪类选择器，同时使用时，要注意使用顺序，不然得不到想要的效果。
顺序为：LVHA：link，visited，hover，active
*/
/* 获取焦点，输入框的背景色 */
input:focus {
background-color: red;
}
<div class="hai">海晨忆</div>
<a href="http://www.haichenyi.com">海晨忆</a>
<a href="http://www.haichenyi.com">海晨忆1</a>
<input type="text">
2.结构伪类选择器
举例
.abc {
/*
:first-child父元素的第一个元素
指定父元素的第一个元素，并且这个元素需要是p元素，给它的字体设置颜色
PS：必须是父元素的第一个元素，并且要是p元素，才会生效
*/
p:first-child {
color: aqua;
}
/*
:nth-child(n)父元素的正数第n个元素，偶数可设置:2n，奇数可设置:2n+1
指定父元素的正数第2个元素，并且这个元素需要是p元素，给它的字体设置颜色
PS：必须是父元素的正数第2个元素，并且要是p元素，才会生效
*/
p:nth-child(2) {
color: red;
}
/*
:nth-last-child(n)父元素的倒数第n个元素
指定父元素的倒数第3个元素，并且这个元素需要是p元素，给它的字体设置颜色
PS：必须是父元素的倒数第3个元素，并且要是p元素，才会生效
*/
p:nth-last-child(3) {
color: cadetblue;
}
/*
:last-child：父元素的最后一个元素
指定父元素的倒数第3个元素，并且这个元素需要是p元素，给它的字体设置颜色
PS：必须是父元素的倒数第3个元素，并且要是p元素，才会生效
*/
p:last-child {
color: blue;
}
/*
:first-of-type：父元素下同类型的第一个元素，不一定非要是父元素的第一个元素
*/
h2:first-of-type {
color: chartreuse;
}
/*
:first-of-type：父元素下同类型的最后一个元素，不一定非要是父元素的最后一个元素
*/
h2:last-of-type {
text-decoration: underline;
}
/*
:nth-of-type(n)：父元素下同类型的正数第n个元素，不一定非要是父元素的正数第n个元素
*/
h2:nth-of-type(2) {
color: blueviolet;
}
/*
:nth-last-of-type(n)：父元素下同类型的倒数第n个元素，不一定非要是父元素的倒数第n个元素
*/
h2:nth-last-of-type(2) {
color: darkgreen;
}
}
.def {
/* 父元素下仅有一个子元素的生效 */
h5:only-child {
font-style: italic;
}
}
<div class="abc">
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h2>这是h2标签</h2>
<h2>这是h2标签</h2>
<h2>这是h2标签</h2>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<!-- <h3>这是H3标签</h3> -->
</div>
<div class="def">
<h5>只是只有一个元素的h5标签，没有兄弟节点</h5>
</div>
3.表单伪类选择器
举例
/* 之说几个常见的 */
/* :checked选中*/
input:checked {
box-shadow: 0 0 5px 2px #6699ff;
}
/* :enabled能选中的，能使用的*/
input:enabled {
background-color: lightgreen;
}
/* :disabled与上面的刚好相反，不能选中的，禁用的*/
input:disabled {
opacity: 0.5;
}
<input type="checkbox">
<input type="text">
<input type="text" disabled>
五丶伪元素选择器
/* ::first-letter选择元素内容的第一个字符
PS：伪元素是两个冒号打头，跟上面的区分开，伪类是一个冒号打头
*/
.ghi {
p::first-letter {
font-size: 2em;
font-weight: bold;
}
}
/* ::first-line选择元素内容的第一行
*/
.jkl {
p::first-line {
font-variant: small-caps;
}
}
/* 内容插入 ，这两个用的比较多
::before：在前面插入
::after：在后面插入
*/
.mno {
q::before {
content: "「";
}
q::after {
content: "」";
}
}
<div class="ghi">
<p>这是一段话</p>
</div>
<div class="jkl">
<p>fjdkslajfkldasjflkdsjakfjdkslajfkldasjfjdkslajfkldasjflkdsjakfjdk
akfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjak</p>
</div>
<div class="mno">
<p>他说：<q>这是一个测试。</q></p>
</div>
上面这些就是CSS的选择器。
优先级
在说优先级之前，先说一下CSS样式的几个特性：层叠性，继承性，优先级，叠加性。
-
层叠性：是指当多个样式规则应用于同一个HTML元素时，这些样式规则会按照特定的优先级顺序进行覆盖。后定义的样式会覆盖先前的样式，但前提是它们的优先级相同。如果样式不冲突，则不会发生层叠。层叠性的原则是"就近原则"，即哪个样式离元素最近，就执行哪个样式。
p { font-size: 30px; color: red; } p { font-size: 20px; } <!--一个简单的例子，下面这个p标签最终显示成红色，字体大小20px--> <p>Hello, CSS! This is an inline style.</p> -
继承性：是指子元素会继承父元素的某些样式属性。合理利用继承性可以简化代码，降低样式的复杂性。但是，并非所有的CSS属性都能被继承。一些属性，如背景色、边框等，是不能被继承的。常见的可继承属性包括字体相关属性（如font-size、font-family）、文本相关属性（如color、text-align）等。
.parent { font-size: 20px; color: blue; } <!-- 内部子div最终显示字体的大小20px，颜色为蓝色。 子元素可以是任意类型的元素，不一定非要跟父元素相同。 --> <div class="parent"> <div>这是子元素</div> </div> -
优先级：决定了当多个样式规则应用于同一个HTML元素时，哪个规则会生效。CSS选择器的优先级是由选择器的类型、数量以及样式表的来源（如行内样式、内嵌样式、外部样式）共同决定的。具体规则如下：
a. !important：具有最高的优先级，可以直接应用于HTML元素。
b. 行内样式：优先级次之，可以直接应用于HTML元素。
c. ID选择器：优先级高于类选择器和标签选择器。
d. 类选择器(伪类/伪元素)：优先级高于标签选择器。
e. 标签选择器：优先级低。
f. 全局选择器：优先级最低
ps:此外，存在!important声明，则它会覆盖所有其他优先级规则，具有最高的优先级。但需要注意的是，过度使用!important可能会导致样式表难以维护。
这里有个新的!important之前没说过，行内样式也没有说过，还有一个全局选择器之前提过一嘴。
如果，你有仔细观察我给出的html的代码，你就会发现style中最开始的位置有一个样式
/* 清除默认值 */
<!--这个就是全局选择器，也叫通配符选择器，*就是通配符-->
* {
margin: 0px;
padding: 0px;
}
再来说说这个!important
div {
font-size: 30px;
color: red;
}
div {
color: blue;
}
p {
font-size: 30px;
color: red !important;
}
p {
color: blue;
}
<!--div标签，字体30px，蓝色。因为蓝色会覆盖红色-->
<div>Hello, CSS! This is an inline style.</div>
<!--
p标签，字体30px，红色。按照我们前面说的规则，蓝色离的近，应该覆盖红色才对，
但是，红色后面有个!important，它的优先级最高，所以，显示红色。
当然，你如果再bule后面也加一个!important，那它就显示成蓝色，因为蓝色更近一些。
-->
<p>Hello, CSS! This is an inline style.</p>
行内样式是直接写在元素上的样式，怎么理解呢？元素上有一个style属性，style属性可以设置元素的样式。
<!--文案最后显示成红色，大小20px-->
<div style="color: red;font-size: 20px;">Hello, CSS! This is an inline style.</div>
-
叠加性：指的是当一个元素匹配多个样式规则时，如果样式属性名不同，则会叠加所有的样式属性。这意味着元素会同时拥有这些不同的样式属性。
p { color: red; } .hai { font-size: 20px; } <!--p标签文案显示红色，字体大小20px--> <p class="hai">Hello, CSS! This is an inline style.</p>
PS:整篇文章，精炼一下，如下
一般选择器的面试问题会问，选择器的优先级关系。你想回答这个问题，你就需要知道有哪些选择器。
- CSS的选择器有：通配符选择器，标签(元素)选择器，类(伪类，伪元素)选择器，ID选择器等等。其他选择器一般都用不到
- 他们的优先级关系 !important > ID > 类(伪类/伪元素) > 标签(元素) > 通配符
都说，这个优先级关系不好记，记不住。你要去理解，不能死记硬背，仅供参考。我是这么记的，物以稀为贵，越少的，范围越小，越能生效。比方说，
通配符选择器: 针对所有种类的标签生效。烂大街的东西，优先级最低。
标签选择器: 针对某一种类型的标签生效。比通配符好一点，优先级比通配符高一点。
ID选择器: 针对某一个标签生效。比标签选择器好一点，优先级也高一点。
!important: 它只能针对某个样式属性生效。多个属性组成一个样式。其他的选择器，都是设置多个样式属性，更稀有了。它的优先级最高。
唯一需要记住的就是类(伪类/伪元素)，他们三个优先级相同。类选择器，需要申明到标签上，它的优先级高于标签选择器，小于ID选择器。
以上，仅作为记住优先级的思路参考。