你不知道的CSS（三）

谁借莪１个温暖的怀抱￠ 2021-07-04 20:55 522阅读 0赞

在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于`:hover, :active, :focus`之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用`js`去添加`.hover`类来变化背景色的同学?）。而伪元素如`:before, :after`相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。

CSS的世界已经变天了，抛开过去，拥抱变化吧~

## 伪类和伪元素的区别 ##

伪类和伪元素是一个比较容易混淆的概念，这不仅仅是从名称上，而且在写法上也是相似的（目前因为兼容性的问题，它们的写法是一致的）。这就更容易混淆了?。但还是希望大家在书写的过程中养成习惯，至于兼容性交给`postcss`等转换工具去实现。

**规范**  
css3 明确规定了伪类用一个冒号`:`来表示，而伪元素则用两个冒号`::`来表示。

**区别**

*  伪类更多的定义的是状态，如`:hover`，或者说是一个可以使用`CSS`进行修饰的特定的特殊元素，如`:first-child`
 *  伪类使用一个冒号:
 *  常见伪类：

:hover
    :active
    :focus
    :visited
    :link
    :lang
    :first-child
    :last-child
    :not

*  伪元素简单来说就是不存在于DOM文档树中的虚拟的元素，它们和`HTML`元素一样，但是你又无法使用`JavaScript`去获取，如`:before`
 *  伪元素使用两个冒号`::`
 *  常见伪元素：

::before
    ::after
    ::first-letter
    ::first-line

## 用`:valid`和`:invalid`来做表单即时校验 ##

html5丰富了表单元素，提供了类似`required,email,tel`等表单元素属性。同样的，我们可以利用`:valid`和`:invalid`来做针对`html5`表单属性的校验。

*  `:required` 伪类指定具有`required` 属性的表单元素
 *  `:valid` 伪类指定一个通过匹配正确的所要求的表单元素
 *  `:invalid` 伪类指定一个不匹配指定要求的表单元素  
    ![在这里插入图片描述][20191031155206639.gif]  
    有没有最开始学`angular`的感觉?，快点直戳demo感受下吧

.valid { 
      border-color: #429032;
      box-shadow: inset 5px 0 0 #429032;
    }
    .invalid { 
      border-color: #D61D1D;
      box-shadow: inset 5px 0 0 #D61D1D;
    }
    .required { 
      border-color: #056B9B;
      box-shadow: inset 5px 0 0 #056B9B;
    }
    input, textarea { 
      &:valid { 
        @extend .valid;
      }
      &:invalid { 
        @extend .invalid;
      } 
      &:required { 
        @extend .required;
      }
    }

## 用`:target`来实现折叠面板 ##

`:target`是文档的内部链接，即 `URL` 后面跟有锚名称 `#`，指向文档内某个具体的元素。

利用 `:target` 的特性可以实现以前只能使用`JavaScript`实现的显示隐藏或者`Collapse` 折叠面板。

.collapse { 
      >.collapse-body { 
        display: none; &:target { 
          display: block;
        }
      }
    }

![预览CSS实现Collapse折叠面板demo][CSS_Collapse_demo]

## 用`:not`来排除其他选择器 ##

`:not`表示的是一个非/不是的概念。我在项目`mo-css`上用到过很多次，尤其是在表单类中，我用它来设置表单元素在`readonly` 和 `disabled`状态之外的`hover`等状态，以便于当元素在`readonly` 和 `disabled`时，元素不具有`hover`状态。

@mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) { 
        color: $color;
        border-color: $border;
        background-color: $background; &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) { 
            &:hover, &:active { 
                color: $hoverColor;
                border-color: $hoverBorder;
                background-color: $hoverBackground;
            }
        }
    }

## 用`:nth-child(even/odd)`来实现隔行变色 ##

`:nth-child`等伪类的参数大多是一个数值或者数学表达式`2n+1`，而`even`作为参数用来表示偶数，`odd`作为参数用来表示奇数的类似于别骂的特性往往被忽略。

ul { 
      &.odd { 
        >li:nth-child(odd) { 
          background: red;
        }
      }
      &.even { 
        >li:nth-child(even) { 
          background: green;
        }
      }
    }

![odd/even在隔行变色中的应用][odd_even]

## 用`::selection`来美化选中文本 ##

就像你用鼠标选中这段话看到的那样，`::selection`用来设置选中文本的样式，从而改变浏览器一成不变的文本选中色（蓝色）。

::selection{ 
     color: #fff;
     background-color: #6bc30d;
    }

![selection设置选中文本样式][selection]

## 用`::placeholder`来美化占位符 ##

`::placeholder`用来修饰`input/textarea`等表单元素`placeholder`属性的样式。

![自定义placeholder][placeholder]

@mixin placeholder { 
      &::-webkit-input-placeholder { 
        @content
      }
      &::-moz-placeholder { 
        @content
      }
      &:-ms-input-placeholder { 
        @content
      }
    }
    input, textarea { 
       @include placeholder { 
          color: #f00;
       }
    }
    //css input::-webkit-input-placeholder{ 
        color: #f00;
    }
    input::-moz-placeholder{ 
         color: #f00;
    }
    input:-ms-input-placeholder{ 
         color: #f00;
    }

## 用`::first-letter`来实现段落首字下沉 ##

首字下沉 ： 设置段落的第一行第一字字体变大，并且向下一定的距离，与后面的段落对齐，段落的其它部分保持原样  
![首字下沉效果][20191031133320866.png]  
就像图中展示的那样，之前实现类似效果，我们需要多加一个标签，如：

然而，现在只需要一个`CSS`伪元素就可以实现。

`first-letter` 伪元素用于向文本的首字母设置特殊样式

p::first-letter{ 
      font-size: 6em;
      line-height: 1;
      float: left;
    }

## 用`::first-line`来特殊标记段落第一行 ##

就如它的名字一样，这个伪元素代表了段落的第一行，你可以使用任意样式来控制它。  
![first-line标记段落第一行][first-line]

p::first-line{ 
      color: red
    }

## 小结 ##

`CSS`的伪类和伪元素还有很多，因为或兼容性或其他原因，文章中介绍的几种伪类/元素用的比较少，这不得不说是一种遗憾。但为了保证项目的健康和可持续化，一定要注意伪类和伪元素的区别，尽可能的在写伪类的时候使用一个冒号:，而在写伪元素的时候用两个冒号`::`，就像使用`autoprefixer`来生成浏览器前缀一样，将`:`和`::`的转换交给`postcss`等工具去做。

[20191031155206639.gif]: /images/20210704/795a3398a8284d8ab7fb4a087466181c.png
[CSS_Collapse_demo]: /images/20210704/7db2b1f30c2e4fe58ca94f8d5142c8b2.png
[odd_even]: /images/20210704/7d592df547dc4dedbd8f4ba962fbf365.png
[selection]: /images/20210704/f7fcce6979d04029a38176c168788bcd.png
[placeholder]: /images/20210704/f632ddf3728e4d3d94ade3f846ddde74.png
[20191031133320866.png]: /images/20210704/80e16cefee954a3bb8e6aaf6d76f1594.png
[first-line]: /images/20210704/79993fa7ac62424abac8ae859bbd1cbe.png