前端语言听课笔记3：CSS选择器|青训营

CSS选择器是CSS语言中的一部分，常用于指定网页上我们想要样式化的HTML元素。
在CSS语言的应用中，一个页面可以写很多个选择器。
但当有多个选择器同时匹配到一个HTML元素时，页面多会通过分析选择器的特异度（越特殊的选择器优先级越高）来决定元素该选择哪种样式。
举例如下：

<article>
    <h1 class="title">前端语言听课笔记3：CSS选择器|青训营</h1>
</article>

<style>
    .title  {
        color:blue;
    }
    
    article  h1 {
        color:red;
    }
</style>

可以看到此段代码中有id(#)有class(.)也有标签(E)等，特异度的计算也以这些东西为标准。
在这之中id的优先级最高，其次是类，最后是标签。在比较时其实也可以简单看成122和22的比较。
像这种样式的覆盖在开发中也有一些用途。比如可以先写一些基础的样式，然后对一些特殊功能的元素使用优先级较高（也就是特异度较高）的样式进行覆盖，以便用户对交互元素进行理解和区分。

另一个概念是关于CSS样式属性的继承。当一种属性为可继承（当）的属性时，举例来说color属性吧。当一种元素并未设置color的属性时，会从元素的父级来看一下其属性所设置的color的值是什么，并从此处完成继承。但如果父级也没有的话则再往上找，除非或直至显式指示其一个值。

此处有一点我的个人理解，就是在利用这种覆盖搭建页面时特殊样式的种类以及覆盖层数应提前根据实际情况设计好。简洁是前端页面的设计原则之一，要努力避免样式覆盖层数过多或样式种类过多的问题。因为这样一来一方面底层代码不好理解和修改，另一方面用户在体验时也会感到眼花缭乱。