《CSS选择器完全手册：从基础选择器到高级伪类实战》

3Katrina
113 阅读8分钟

前言

hello，大家好，欢迎来到大厂面试系列，本文给大家带来一些CSS的底层基础知识的讲解，俗话说的好，不积硅步，无以至千里，相信你牢固地掌握好这些细节知识，才能得到更高的提升！本文内容结构分为CSS的基本组成和选择器的详细介绍。接下来让我们进入CSS的奇妙世界吧！



CSS的组成

首先讲解CSS的组成，我们随便拉一段CSS的部分代码，通过解析这段代码来进行讲解：

<style>
        .container{
            margin:20px;
            padding:20px
            background-color: skyblue;
        }
        p {
            color : blue
        }         

</style>

声明与声明块

在这段代码中，{}中的属性和对应的值（比如margin:20px）叫做声明(Declaration)，上面代码中.container{}中就有三个声明，分别是margin:20px,padding:20px,background-color:skyblue。

而{}包括里面的所有声明，组成了一个声明块（Declaration Block），比如.container后面的{...}就是一个声明块，p后面的{...}就是另一个声明块。

选择器

在这段代码中，.container和p就是选择器(selector)，你会发现有的选择器有“.”，有的选择器没有“.”，这是因为选择器的种类不同，后面我们会详细介绍。

rule与ruleset

一个rule就是由一个declaration和selector构成的，比如上面的p{color:blue} 就是一个rule。而ruleset就是rule的集合，比如上面ruleset是.container{...}加上p {...}。


选择器

选择器是CSS的重要组成，用来定位HTML哪个部分需要做CSS的美化。在CSS中，有许许多多的选择器，让我们分类说明：


基本选择器

1. 元素选择器（标签选择器）

可以选择HTML的原生标签，也可以自定义标签并选择

p {
  color: blue;
}
/* 选择所有 <p> 元素 */
MyDiv {
  font-size: 18px
}
/* 自定义标签并声明样式 */

2. 类选择器 (Class Selector)

通过 class 属性选择元素，以点号(.)开头

.highlight {
  background-color: yellow;
}
/* 选择所有 class="highlight" 的元素 */

3. ID 选择器

通过 id 属性选择元素，以井号(#)开头

#header {
  font-size: 24px;
}
/* 选择 id="header" 的元素 */

4. 通用选择器

选择所有元素，用星号(*)表示

* {
  margin: 0;
  padding: 0;
}
/* 选择所有元素 */

组合选择器

组合选择器可以组合以上的一些选择器，进行更精确的选择，我们可以结合着一个案例来讲解。

<body>
    <div class="container">
        <p>标题之前的段落</p>
        <h1>标题</h1>
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <a href="#">链接</a>
        <span>这是一个span元素</span>
        <div class="inner">
            <p>这是内部的段落</p>
        </div>
    </div>
</body>

案例HTML结构

image.png

没有任何CSS的效果图


1.后代选择器（空格）

选择指定元素内部的所有后代元素

 .container p {
     text-decoration: underline;
}

image.png

效果图1


2.相邻兄弟选择器(+)

相邻兄弟选择器选择紧接着当前元素的后一个元素

h1 + p {
    color: red;
}

image.png

效果图2


3.通用兄弟选择器（~）

通用兄弟选择器会选择当前层级后序的同级元素，注意是同级

h1 ~ p {
    color: green;
}

image.png

效果图3


4.子元素选择器（>）

子元素选择器会选择当前元素的直接子元素，而不会选择孙子元素。

.container > p {
    font-size: 30px;
}

image.png



伪类选择器

伪类选择器相对来讲较为特殊和复杂，我们分三部分来讲


行为状态伪类

行为状态伪类是CSS中一类特殊的伪类选择器，它们根据用户的交互行为或元素的动态状态来匹配元素。这类伪类将用户交互与元素状态变化紧密结合，是创建响应式界面的重要工具。

1.链接相关伪类

    a:link     { color: blue; }    /* 未访问的链接 */
    a:visited  { color: purple; }  /* 已访问的链接 */
    a:hover    { color: red; }     /* 鼠标悬停时 */
    a:active   { color: orange; }  /* 点击激活时 */

动画.gif

2.用户交互伪类

button:hover    { background: red; }  /* 鼠标悬停 */
input:focus     { border-raduis: 20px; } /* 获得焦点时 */
button:active   { border-raduis: 20px; } /* 按下状态 */

动画.gif

3.表单状态伪类

input:enabled   { border: 1px solid #ccc; }  /* 可用的表单元素 */
input:disabled  { opacity: 0.5; }           /* 禁用的表单元素 */
input:checked   { accent-color: green; }    /* 选中的单选/复选框 */
input:invalid   { border-color: red; }      /* 输入无效时 */
input:valid     { border-color: green; }    /* 输入有效时 */

image.png

4.其它交互伪类

::selection {
    background-color: brown;
    color: white;
}

动画.gif



结构伪类

结构伪类是CSS中一类特殊的选择器，它们根据文档树中的结构关系来选择元素，而不是基于元素的类、ID或属性。

1. 基础子元素选择

:first-child选择作为其父元素第一个子元素的元素

li:first-child {
  color: red; /* 列表中的第一个<li>会变红 */
}

:last-child选择作为其父元素最后一个子元素的元素

li:last-child {
  font-weight: bold; /* 列表中的最后一个<li>会加粗 */
}

:only-child选择作为其父元素唯一子元素的元素

div:only-child {
  border: 2px solid blue; /* 单独一个<div>时会添加边框 */
}

image.png


2. 序数选择

:nth-child()选择父元素下的第n个子元素

/* 选择偶数行 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择第3个元素 */
li:nth-child(3) {
  color: green;
}

/* 选择每第4个元素 */
div:nth-child(4n) {
  margin-bottom: 20px;
}

:nth-last-child()

从末尾开始计数选择子元素

/* 选择倒数第2个元素 */
li:nth-last-child(2) {
  font-style: italic;
}

image.png


3. 特定类型选择

我们需要注意：上面的nth和first是针对于在父元素下的不同元素的顺序，如果该元素跟该顺序上的元素不匹配的话，则不会生效, 请看下面的例子

<style>
        p:nth-child(3) {
            color: red;
        }

        p:nth-child(4) {
            color: red;
        }
</style>

<body>
    <div class="container">
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <p>这是第三段文字</p>
        <div>第一个标签</div>
        <div>第二个标签</div>
        <p>这是第四段文字</p>
        <p>这是第五段文字</p>
        <p>这是第六段文字</p>
    </div>
    
</body>

你会发现只有第三段文字生效了，第四段文字并没有生效 image.png

这是因为 我们在css中是确定第四个元素为p的情况下生效，但事实上第四个元素并不是p标签，所以就不会生效。这是上面的默认nth和first-child等默认的结构伪类的特点。

我们可以用特定类型选择来实现按顺序选择指定的类型的元素。

在上面的代码中，我们想要将第四个p标签的文字设置为红色，可以使用

p:nth-of-type(4) {
    color: red;
}

image.png

这样就能成功啦！



常见的特定类型的选择有以下方式：

:first-of-type 选择同类型兄弟元素中的第一个

article:first-of-type {
  border-top: none; /* 第一个<article>没有上边框 */
}

:last-of-type选择同类型兄弟元素中的最后一个

p:last-of-type {
  margin-bottom: 0; /* 最后一个<p>没有下边距 */
}

:only-of-type 选择没有相同类型兄弟元素的元素

img:only-of-type {
  display: block; /* 单独一张图片时改为块级显示 */
}

:nth-of-type()选择同类型兄弟元素中的第n个

/* 每第3个段落特殊样式 */
p:nth-of-type(3n) {
  text-indent: 2em;
}

:nth-last-of-type() 从末尾开始计数选择同类型元素

/* 倒数第2个表格行 */
tr:nth-last-of-type(2) {
  background-color: #ffe6e6;

条件伪类

接下来就是最后一种伪类：条件伪类，条件伪类是 CSS 中一组特殊的选择器，它们根据特定条件匹配元素。这些伪类不是基于元素的状态或结构，而是基于文档或环境的某些条件进行选择，下面介绍几种常见的条件伪类：

1. :not() 否定伪类

/* 选择所有不是<p>的元素 */
:not(p) {
  font-family: Arial;
}

/* 选择所有不含.disabled类的按钮 */
button:not(.disabled) {
  cursor: pointer;
}

2. :is() (原:matches()或:any())

匹配列表中任意一个选择器对应的元素

/* 选择header、main或footer中的段落 */
:is(header, main, footer) p {
  line-height: 1.5;
}

3. :where()

功能类似:is()，但优先级总是0

/* 与:is()示例相同，但优先级更低 */
:where(header, main, footer) p {
  margin-bottom: 1em;
}

4. :has()

匹配包含特定子元素的父元素（CSS关系选择器）

/* 选择包含<img>的<a> */
a:has(img) {
  border: 1px solid #ccc;
}

/* 选择包含.active子元素的列表项 */
li:has(.active) {
  font-weight: bold;
}

总结

在本文中，我们介绍了CSS的基本结构以及不同部分的官方名称，还对选择器进行了详细地介绍，选择你可以了解各式各样的选择器以及掌握其用法，特别是一些相对复杂的选择器，我们要理清它们的概念与用法，不要混淆！这些内容不论是在面试中还是在实战中都是非常重要的


🌇结尾

感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是3Katrina，一个热爱编程的大三学生

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

作者：3Katrina
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝