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

个人博客：haichenyi.com。感谢关注

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><!-- <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>fjdkslajfkldasjflkdsjakfjdkslajfkldasjfjdkslajfkldasjflkdsjakfjdkakfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjakfjdkslajfkldasjflkdsjak</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选择器。

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