使用hover后隐藏的图片不显示_你不知道的哪些伪类用法

最近在看 《CSS 选择器世界》

通过伪类能够做很多事情不用借助js，比如列表搜索过滤效果，表单验证必选提醒，表单选中状态特殊的样式， 空列表的占位符。这些都不需要借助 js ，开心，坚信每少一行代码，就少一点 bug 的出现率。

这些都是在双十一凑单神器 《CSS 选择器世界》，上面看到了，推荐看。完之后对我而言 get 到了很多新技能，写代码可以写的更加简介了，维护性也很不错。不信你可以先看看我的这些东西，如果你和我说这个你都知道，经常用，原来是我的无知，

:empty

:empty : css 伪类代表没有子元素的元素，子元素只可以是元素节点或者文本

<div class="empty1"></div>
    .empty1:empty {
    background: pink;
    height: 80px;
    width: 80px;
  }
    // 对比 下面的会失效
  <div class="empty1">有内容</div>
    .empty1:empty {
    background: pink;
    height: 80px;
    width: 80px;
  }

注意： 注释，空格都没法匹配

利用场景：

请求接口，但是没有数据返回，利用 :empty 可以少写 v-if 进行数据判断。

:not

匹配不符合一组选择器的元素

使用场景：

配合 :first-child 和 :last-child 可以简单实现首尾样式不一样

搜索过滤实例页面

没想到还能这么用吧，我也才发现，又可以少几行 css 代码了

:checked

场景：默认的选项框和设计稿不符合，样式太丑，没有引用第三方 ui 库，直接手写。

原理是把原有的选项框隐藏掉，文字用 span 包裹，设计稿需要的样式直接写在 label 标签上面。选中样式通过 input:checked + label

参考代码

<div>
    <input type="radio" name="radioName" id="fed-engineer" >
    <label for="fed-engineer"></label>
    <span>前端工程师</span>
</div>
    input:checked + label {
    background-color: #f90;
}
label {
    margin-right: 5px;
    padding: 2px;
    border: 1px solid #f90;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    background-clip: content-box;
    cursor: pointer;
    transition: all 300ms;
    &:hover {
        border-color: #09f;
        background-color: #09f;
        box-shadow: 0 0 7px #09f;
    }
}

利用 :checked 可以对一些选中的项做样式处理，不用 js 直接 css 实现

:default

默认状态

利用这个伪类可以帮我们记住默认状态，避免选择与默认混淆，当默认选项修改的时候，只要修改一处就好了，相对而言有利于项目维护

利用场景：

:required

伪类用来匹配设置了 required 属性的表单元素，表示这个表单元素必填或者必写，:optional是他的对立面

:placeholder-shown

占位符显示伪类

当输入框的 placeholder 内容显示的时候，匹配该输入框，这个现在有兼容性

参考 demo

::selection

改变选中文本选择颜色

::selection{
        color:#37ca7c;
    }

可设置的颜色种类不多，可参考文档 参考文章 灵活运用 CSS 开发技巧

:indeterminate

复选框是全选还是半选状态

参考 demo

:valid :invalid

pattern 检查控件值的正则表达式

:valid 表单验证通过的样式

:invalid 表单未通过验证的样式

参考链接

nth-child() 适用于内容动态无法确认的匹配场景

选择器优化

input[type="radio"] 简写 [type="radio"],因为 radio 类型的单选款一定是 input 标签

因为 id 选择器的优先级很高，一般不建议使用，因为后期维护成本很高

transition 属性对 display 没有过渡效果，但是对于 visibility 有过渡效果，有时候我们可以 transition 做一点动画，效果体验会更好，配合 :hover

不建议用 span div 模拟按钮 ui 效果，因为 button 原生支持表单提交，enter ，可以被键盘 focus

通过用 display 或者 visibility 隐藏的元素没办法通过键盘让隐藏的元素控件通过 :focus 聚焦，我们可以使用 opcity 做到

博客会保持一直更新第一状态，社区不一定同步，欢迎关注我的博客

http://sunseekers.cn/

截图代码链接