这是我参与「第五届青训营 」笔记创作活动的第 2 天

前言

我的前端技术栈提升主要是靠写项目来提升的，写项目会让你能够快速上手一门语言。但是由于对语言的理解不深，所以前几个项目会比较差并且基础知识也不牢固，在本次的课程中我就发现了我不少遗漏的地方，本文将会梳理一些自己之前漏掉的知识与部分重点，对于常见的一些点不再进行解释。

选择器

常见的标签选择器、ID选择、类选择器不再提出并解释。

属性选择器

<input value="t" disabled />

<style>
    [disabled] {
        display: none;
    }
</style>

在上述代码中就是使用属性选择器让input标签隐藏起来。

其实属性选择器大家都见过，使用 Vue、React 这种框架的网页通常都会使用属性选择器来隔离不同组件间的 CSS，就拿掘金来举例。

在打开 “开发者工具” 后，你会发现许多标签上面都会有着data-v-XXXXX这种属性，选中带有这种属性的标签后，你就能发现这个标签样式正是类选择器配合属性选择器的。

图中的样式如下，其中.main[data-v-b6051446]不正是属性选择器吗。

<div data-v-b6051446="" class="main">
    <!--略-->
</div>

<style>
    .advertisement .main[data-v-b6051446] {
      margin-top: 6px;
      padding-bottom: 12px;
      display: flex;
      border-bottom: 1px solid rgb(229, 230, 235);
    }
</style>

伪类

:visited

用户访问过的链接，如百度点击搜索结果后，搜索结果会变蓝。

小提示：

出于隐私原因，此选择器能修改的样式非常有限，并且会被后面的伪类覆盖，详情请查看MDN

:focus

聚焦后的伪类，上一篇适老化文章中最后提的澳大利亚政府的无障碍适配就是使用了:focus。

:first-child

对于第一个元素的样式，这里不一定非得是在li标签上可以用在任何标签，还是拿掘金来当作案例。

这块的代码如下：

利用上面的属性选择器对其添加如下的CSS样式，使第一项标签“综合”隐藏：

[data-v-7d015cd0] a:first-child {
  visibility: hidden;
}

这里的标签导航栏在掘金的屏幕大小适配中同样有使用:first-child样式。

这里让在第一位和最后一位元素的左右间距各加0.5rem（非第一项和最后一项的左右间距为1rem）

:last-child

:last-child如同名字一样，是对最后一个元素生效，与上面的first-child相反

参考

• 走进前端技术栈 - CSS
• 稀土掘金