css层叠样式来源及优先级知识点

CSS层叠样式表

1. CSS 来源有哪些

行内style style="***"

示例

<h1 id="title" class="title" style="color:red">我是在努力学习PHP的八零后</h1>

css公共表单文件 <style><style>

示例

<!-- 内部样式表用的标签为<style>,仅适合html文档-->
    <style>
        /* 选择器 */
        /* 声明和声明块使用大括号把多个声明包起来 */
        h1 {
            color: brown
        }
        /* 声明：由属性和属性值两部分组成
        声明块：由一个和多个声明包在一个大括号里
        选择器是写在声明块前面的一个标识符，用来选择页面中一个或多个元素
        规则集是选择器和声明块组合而成的 */
    </style>
</head>
<body>
    <h1 id="page-title" class="title" 我是在努力学习PHP的八零后</h1>
</body>

外部css引入样式 common.css jQuery.css layui.css 通过<link>引入

2. css优先级冲突的解决方案

选择器优先级

！important强制优先级 —-不建议用
优先级排列顺序为：tag < class < id

示例	id	class	tag	标识
html body header h1	0	0	4	0，0，4
body header.page-header h1	0	1	3	0，1，3
.page-header .title	0	2	0	0，2，0
#page-title	1	0	0	1，0，0

    <style>
        /* 优先级说明 */
        html body header h1 {
            color: purple;
        }
        /* 以上做法为4个标签`tag`,没有套入ID，没有套入class,优先级为：0，0，4 */
        body header.page-header h1 {
            color: red;
        }
        /* 以上写法为三个标签，一个class,没有ID，优先级为：0，1，3 */
        .page-header .title {
            color:darkorange;
        }
        /* 以上写法为0个标签，2个class,没有ID，优先级为：0，2，0 */
        #page-title {
            color: green;
        }
        /* 以上写法为0个标签，0个class,一个ID，优先级为：0，2，0 */
    </style>
    </head>
<body>
    <header class="page-header">
    <h1 id="page-title" class="title" style="color: #667766;;">我是在努力学习PHP的八零后</h1>
    <h1>他就是一个小帅哥，但他喜欢比他大的姐姐</h1>
    </header>

重点

尽可能不用 !important
尽可能不用 id,因为他的级别太高了，丧失灵活性
尽可能不用 tag，因为它不能做为样式复用，丧失了样式复用功能

CSS层叠样式表

1. CSS 来源有哪些

2. css优先级冲突的解决方案

选择器优先级

相关文章