这是我参与「第四届青训营 」笔记创作活动的的第1天。
本文总结这两天来学习HTML和CSS所获得的新知识，有一些甚至在Mozilla文档也未曾提及，可谓收获颇丰。
属性选择器
根据html标签中的属性及属性值来对tag进行选择，在同类型的标签较多时，可以根据属性和属性值选择其中为一组的标签进行CSS属性设置。比如多组input，想要其中一组（name均为"group2"）的样式与其他的不同，可以在<style>中如下选择：
input[name="group2"]::before {
content: '+';
}
而“=”只是其中的一种，还有三种选值方式，可以发挥近似正则表达式的效果：
^="value"：以value开头的。$="value"：以value结尾的。*="value"：包含value在内的。
这就十分灵活了，在较多的标签组中，所在层次不同的同一类标签，我们习惯以命名规则区分，其中每一组的分组名name的值就包含了相同的前缀、后缀或其他部分字符，就可以运用这三种选择器。
与上面相类似，一个标签同时属于多个组时，可以用以下选择方式：
~="value"： 至少含有value所包含的组的，value是个值列表，每个值之间以空格分开。|="value"： 以value或value-开头的。MDN官方所给的例子是匹配语言代码：zh-CN与zh-T0可以用zh为value，en、en-GB、en-US可以用en为value。
选择器的特异度（优先级问题）
在我之前的认识里，选择器优先级由高到低的顺序是：
而课程上引出了选择器的特异度（specificity）问题，旨在计算多重选择器的优先级比较。总的来说有一个原则，按照之前的优先级分成三类，求同类的和（比如第2类类选择器、属性选择器、伪类，共有几个，和就是几），我们从优先级大到小比较。以下面的两个选择器为例：
- 选择器1：
#test1 .list li a:focus - 选择器2：
#test2 .navibar ul li::before
选择器1的1、2、3级的和分别为：1(#test1)、2(.list和:focus)、2（li和a），选择器2的1、2、3级的和分别为：1（#test2）、1（.navibar）、3（ul、li和::before）。
我们逐个比较，1级均相等，继续；2级下选择器1大于选择器2（2 > 1），即可判断选择器1优先级高，最终如果选择器2内没有!important干扰，则显示选择器1内的样式。也就不再比较第3级了，即使第3级2 < 3。因为第2级优先级大于第3级。
顺便一提，!important与最终的结果直接相关，而不参与上面优先级的计算。
上面的结果，直接写成十进制的数字122、113，也可以比较，因为百位 > 十位 > 个位，122 > 113更加方便。
