css基础层叠样式

原创已于 2022-11-17 16:36:31 修改 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2022-11-17 16:34:23 首次发布

css 专栏收录该内容

3 篇文章

订阅专栏

层叠

声明冲突：同一个样式，多次应用同一个元素

层叠：觉接声明冲突的过程，浏览器自动处理（权重计算）

1.比较重要性

重要性从高到低

作者样式表：开发者书写的样式

1）作者样式表中的！important样式,不到万不得已不要加important
2）作者样式表中的普通样式
3）浏览器默认样式表中的样式

2.比较特殊性

看选择器

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

具体规则：通过选择器，计算出一个4位数（XXXX）

1.千位：如果是内联样式，记做1，否则为0
2.百位：等于选择器中所有id选择器的数量
3.十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
4.个位：等于选择器中所有元素选择器，伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

应用

1.重置样式表

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

重置样式表 -> 浏览器的默认样式

网上常见的重置样式表：normalize.css,reset.css,meyer.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="重置样式代码块">
</head>
<style>
	h1{
    	color: red;
    	font-size: 3em;
	}
    a{
        /* color: red !important; */
        text-decoration: none;
        font-style: italic;
        font-size: 5em;
    }
    .act{
        color: #fff;
        background-color: red;

    }
</style>
<body>
    <h1>标题</h1>
    <a href="">Lorem.</a>
    <a href="">Cupiditate.</a>
    <a href="">Consectetur.</a>
    <a href="" class="act">Ipsam!</a>
    <a href="">Ipsa!</a>
    <a href="">Aspernatur?</a>
    <a href="">Dolor!</a>
    <a href="">Soluta.</a>
    <a href="">Quasi.</a>
    <a href="">Sapiente!</a>
</body>
</html>