CSS—选择器详解：5分钟动手掌握选择器

开源代码
2025-09-20 21:48:02

个人博客：haichenyi 。感谢关注

1. 目录 1–目录2–引言3–种类4–优先级

引言

什么是选择器？

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>  <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:// .haichenyi ">海晨忆</a> <a href="http:// .haichenyi ">海晨忆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>  </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>Hello, CSS! This is an inline style.</p> 继承性：是指子元素会继承父元素的某些样式属性。合理利用继承性可以简化代码，降低样式的复杂性。但是，并非所有的CSS属性都能被继承。一些属性，如背景色、边框等，是不能被继承的。常见的可继承属性包括字体相关属性（如font-size、font-family）、文本相关属性（如color、text-align）等。 .parent { font-size: 20px; color: blue; }  <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>Hello, CSS! This is an inline style.</div>  <p>Hello, CSS! This is an inline style.</p>

行内样式是直接写在元素上的样式，怎么理解呢？元素上有一个style属性，style属性可以设置元素的样式。

<div style="color: red;font-size: 20px;">Hello, CSS! This is an inline style.</div> 叠加性：指的是当一个元素匹配多个样式规则时，如果样式属性名不同，则会叠加所有的样式属性。这意味着元素会同时拥有这些不同的样式属性。 p { color: red; } .hai { font-size: 20px; }  <p class="hai">Hello, CSS! This is an inline style.</p>

PS:整篇文章，精炼一下，如下

一般选择器的面试问题会问，选择器的优先级关系。你想回答这个问题，你就需要知道有哪些选择器。

CSS的选择器有：通配符选择器，标签(元素)选择器，类(伪类，伪元素)选择器，ID选择器等等。其他选择器一般都用不到他们的优先级关系 !important > ID > 类(伪类/伪元素) > 标签(元素) > 通配符

都说，这个优先级关系不好记，记不住。你要去理解，不能死记硬背，仅供参考。我是这么记的，物以稀为贵，越少的，范围越小，越能生效。比方说，

通配符选择器: 针对所有种类的标签生效。烂大街的东西，优先级最低。

标签选择器: 针对某一种类型的标签生效。比通配符好一点，优先级比通配符高一点。

ID选择器: 针对某一个标签生效。比标签选择器好一点，优先级也高一点。

!important: 它只能针对某个样式属性生效。多个属性组成一个样式。其他的选择器，都是设置多个样式属性，更稀有了。它的优先级最高。

唯一需要记住的就是类(伪类/伪元素)，他们三个优先级相同。类选择器，需要申明到标签上，它的优先级高于标签选择器，小于ID选择器。

以上，仅作为记住优先级的思路参考。

标签：

CSS—选择器详解：5分钟动手掌握选择器由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS—选择器详解：5分钟动手掌握选择器”