【Hello CSS】第五章-CSS的选择器与函数

• 作者：陈大鱼头
• github： KRISACHAN

在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟**CSS选择器（CSS Selectors）**相关的内容，有兴趣的请继续往下看。

CSS选择器（CSS Selectors）

啥叫选择器？简单来说就是通过一些定义来选中特定的HTML标签。biu~

首先我们来看看选择器的分类：

基本选择器

1. 类型选择器：简单来说就是直接选择HTML标签（不带<>的那种），例如：html {width: 100%;};

2. 类选择器：就是HTML标签中class属性的值（但就是给每个值加上了.），例如：.div {width: 100%;};

3. ID选择器：就是HTML标签中id属性的值（但就是给每个值加上了#，但是要注意，一个文档中的ID应是唯一的，但能不能写多个？其实也是可以，只是不建议这么做，至于为什么，后面的文章会进行讲解）;

4. 通用选择器：写个*****，啥HTML标签都选中了。例如：* {width: 100%;}

5. 属性选择器：就是根据HTML标签里的属性选择，语法大概如下：

   [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

鱼头注：上面的~、|、^、$跟正则表达式的语法相似，对正则表达式语法不熟的可以看鱼头的github

组合选择器

1. 空格：后代选择器，例如：.a .b。在例子中选中的就是.a里面的所有带有.b的节点；
2. >：子代选择器，例如：.a > .b。在例子中选中的就是.a里面的所有带有.b的子节点；
3. ~：后继选择器，例如：.a ~ .b。在例子中选中的就是在.a后面的.b；
4. +：直接后继选择器，例如：.a + .b。在例子中选中的就是在.a后面下一个.b；
5. |: 命名空间选择器，例如：.a | .b。在例子中选中的就是属于.a的.b，跟.a .b一样，属于Selectors Leve 3的内容。
6. ||：列选择器，例如：.a || .b。在例子中选中的就是由.a表示的列的网格/表中的单元格的.b，属于Selectors Level 4的内容。

伪类与伪元素

1. 伪类：伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。

   // 语法
   selector:pseudo-class {
        
     property: value;
   }
   

2. 伪元素：伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。一个选择器中只能使用一个伪元素。

   // 语法
   selector::pseudo-element {
        
     property: value;
   }
   

其实掌握了CSS的选择器之后，是可以根据合理的排列组合来实现一些比较有趣的效果的，当然这些效果可能对实际业务逻辑没什么帮助，甚至不一定能用，但是也可以给我们在解决问题的时候提供一个方向。就例如以下DEMO：一个用纯CSS实现的表单验证。

源码在：codepen，你也可以把以下代码复制粘贴，在浏览器查看。

<style>
    :root {
    
      --error-color: red;