HTML&CSS-Day4

P1 选择器

1.选择器定义：帮助你精准的选中想要的元素。

2.简单选择器：

（1）ID选择器

（2）元素选择器

（3）类选择器

（4）通配符选择器:*,选中所有元素。

/*选中所有属性*/

*{
    color: red;
}

（5）属性选择器:根据属性名和属性值选中元素。

/*选中所有具有ref属性的元素*/

[href]{
    color: aqua;
}

.b{
    color: black;
}

（6）伪类选择器：选中某些元素的某种状态。

①link:超链接未访问的状态。

②visited:超链接访问过后的状态。

③active:激活状态，鼠标按下状态。

④hover:鼠标悬停状态。

:hover{
    color: brown;
}


a:hover{
    color: brown;
}


a:active{
    color: brown;
}


a:link{
    color: chocolate;
}

a:visited{
    color: blue;
}

（7）伪元素选择器:生成并选中某个元素内部的第一个子元素和最后一个子元素。

①before：

span::before{
    content:"《";
    color: red;
}

②after：

span::after{
    content:"》";
    color: red;
}

2.选择器的组合：

（1）并且

（2）后代元素一 空格

（3）子元素一>

（4）相邻兄弟元素一+

（5）后面出现的所有兄弟元素一~

3. 选择器的并列：

多个选择器，用逗号分隔。

P2 层叠

1.声明冲突：同一个样式，多次应用到同一个样式。

2.层叠：解决声明冲突的过程，浏览器自动处理（权重计算）。

（1）比较重要性：重要性从高到低：作者样式：开发者书写的样式。

①作者样式表中的！important样式。

②作者样式表中的普通样式。

③浏览器默认样式表中的样式。

（2）比较特殊性：看选择器

总体规则：选择器选中的范围越窄，越特殊。

具体规则：通过选择器计算出一个4位数。

①千位：如果是内联样式，记1，否则记0。

②百位：等于选择器中所有ID选择器的数量。

③十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量。

④个位：等于选择器中所有元素选择器、伪元素选择器的数量。

（3）比较源次序：代码书写靠后的胜出。

2.应用：

（1）重置样式表：

书写一些作者样式，覆盖浏览器的默认样式。

用重置样式表覆盖浏览器的默认样式。

（2）link>visited>hover>active