css选择器使用

无悔欧
111 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

css选择器

在应用编码中，可能很多人都有这个习惯，就是使用很多的类，殊不知有时使用选择器比写类要来的更快一点，也更简单一点

分类

对于选择器在标准概念中并无做出明确的分类，不过我们有时可以根据功能来做一个方便记忆的分类

基础选择器
基础选择器
tag标签选择器指定类型的标签1
#idID选择器指定身份的标签1
.class类选择器指定类名的标签1
*通配选择器所有类型的标签2
层次选择器
elemP elemC后代选择器元素的后代元素1
elemP>elemC子代选择器元素的子代元素2
elemP+elemC相邻同胞选择器元素相邻的同胞元素2
elemP~elemC通用同胞选择器元素后面的同胞元素3
集合选择器
elem1,elem2并集选择器多个指定的元素1
elem.class交集选择器指定类名的元素1
条件选择器
:lang指定标记语言的元素2
:dir()指定编写方向的元素4
:has包括指定元素的元素4
:is指定条件的元素4
:not非指定条件的元素4
:where指定条件的元素4
:scope指定元素作为参考点4
:any-link所有包括href的链接元素4
:local-link所有包括href且属于绝对地址的链接元素4
状态选择器
:active鼠标激活的元素1
:hover鼠标悬浮的元素1
:link未访问的链接元素1
:visited已访问的链接元素1
:target当前锚点的元素3
:focus输入聚焦的表单元素2
:required输入必填的表单元素3
:valid输入合法的表单元素3
:invalid输入非法的表单元素3
:in-range输入范围内的表单元素3
:out-of-range输入范围外的表单元素3
:checked选项选中的表单元素3
:optional选项可选的表单元素3
:enabled事件启用的表单元素3
:disabled事件禁用的表单元素3
:read-only只读的表单元素3
:read-write可读可写的表单元素3
:target-within内部锚点元素处于激活状态的元素4
:focus-within内部表单元素处于聚焦状态的元素4
:focus-visible输入聚焦的表单元素4
:blank输入为空的表单元素4
:user-invalid输入合法的表单元素4
:indeterminate选项未定的表单元素4
:placeholder-shown占位显示的表单元素4
:current()浏览中的元素4
:past()已浏览的元素4
:future()未浏览的元素4
:playing开始播放的媒体元素4
:paused暂停播放的媒体元素4
结构选择器
:root文档的根元素3
:empty无子元素的元素3
:nth-child(n)元素中指定顺序索引的元素3
:nth-last-child(n)元素中指定逆序索引的元素3
:first-child元素中为首的元素2
:last-child元素中为尾的元素3
:only-child父元素仅有该元素的元素3
:nth-of-type(n)标签中指定顺序索引的标签3
:nth-last-of-type(n)标签中指定逆序索引的标签3
:first-of-type标签中为首的标签3
last-of-type标签中为尾的标签3
:only-of-type父元素仅有该标签的标签3
属性选择器
[attr]指定属性的元素2
[attr=val]属性等于指定元素的元素2
[attr*=val]属性包括指定值的元素3
[attr^=val]属性以指定值开头的元素3
[attr$=val]属性以指定值结尾的元素3
伪元素
::before在元素前加入的内容2
::after在元素后加入的内容2
::first-letter元素的首字母1
::first-line元素的首行1
::selection鼠标选中的元素3
::backdrop全屏模式的元素4
::placeholder表单元素的占位4
优点:

对于上述分类的选择器，我们可以规划处几点

  • 减少很多无用或少用的类，保持css文件的整洁性与观赏性
  • 减少修改类而有可能导致样式失效的问题，有时修改类但未确保HTML与CSS一样而导致样式失效
  • 减少无实质性使用的类，例如很多层嵌套的标签，这些标签可能只用到一个属性，就无必要创建类关联
  • 对于那些结构与行为分离的写法，使用Scss/Less编写属性时结构会更清晰易读
  • 使用选择器可实现一些看似只能由JS才能实现的效果，既减少代码量也减少JS对DOM的操作，使得交互效果更流畅

因为选择器太多，所以下面列举几个比较常用的

：hover

这个选择器作用于鼠标悬浮的节点，是一个很好用的选择器。

通常也可以结合attr()，来应用于鼠标悬浮在某个节点中显示提示浮层

:valid与:invalid

通常我们在判断表单输入是否合法时，会使用JS来做判断，而h5发布后，上面两个选择器就可以替代而减少代码量

:checked

作用于选项选中的表单节点，不过只有当的type设置为radio与checkbox时可用

主要用于模拟鼠标点击事件

<input class="switch-btn" type="checkbox">

.btn {
    border-radius: 31px;
    width: 102px;
    height: 62px;
    background-color: #e9e9eb;
}
.switch-btn {
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: all 100ms;
    @extend .btn;
    &::before {
        position: absolute;
        content: "";
        transition: all 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    &::after {
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 27px;
        width: 54px;
        height: 54px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: "";
        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:checked {
        background-color: #5eb662;
        &::before {
            transform: scale(0);
        }
        &::after {
            transform: translateX(40px);
        }
    }
}
::before与::after

有时为了实现某个效果会在网页中添加很多的标签来书写效果，不过，写的太多也会显得很繁琐，这时会引入伪元素来解决。

伪元素在网页中是不存在的元素

伪类与伪元素虽然都是选择器，但它们还是存在一丝丝的差别。

  • 伪类通常是一些状态选择器，选择处于指定状态的DOM，例如:hover、:focus、:checked等
  • 伪元素通常是一些实体选择器，选择满足指定条件的DOM，例如::selection、::first-letter、::first-line等
avatar
文章
阅读
粉丝