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

伪类选择器的标签组合

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

效果：

在本案例中，我们采取的是标签选择器 + 类选择器的组合input.error，这是伪类选择器的组合方式之一，属于直接组合方式；

对于它的其他组合方式还有很多，如：

在后代组合中，表示不管A ，B之间隔了多少代标签，只要是子孙后代关系，那么A标签都可以通过伪类的后代组合方式选中B，针对B添加特定的属性

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

效果：

颜色

rgb -rgba

最基本的使用颜色的方法是使用如果三原色的表示方法，通过调节三原色的比例程度，从而形成我们需要的颜色

而对于rgba，表示的是前面rgb颜色的深浅程度，比例大小，透明度

HSL

第二种颜色表示方式：使用Hue，Saturation，Lightness

两种表示方式对比：

假使我对第二种HSL的第一个Hue值相对熟悉的话，就可以根据第一个值，判断出大致的颜色，再根绝第二个参数饱和度，和第三个参数明亮度，就可以想象出颜色的深浅了，与第一个相比，较容易对要使用的颜色有个初步印象。（只有一个颜色值，比第一个三个参数好判断些）

走进前端技术栈CSS4 | 青训营笔记

伪类选择器的标签组合

颜色

rgb -rgba

HSL