实例演示选择器的优先级,id,class,tag -

<!DOCTYPE html>
<html lang="zh-cn">
<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>1. 实例演示选择器的优先级,id,class,tag;</title>
    <style>
        /* 选择器 + 声明块 = 样式规则 */
        /* 在样式的优先级相同情况下，书写顺序决定优先级 写在后面的样式会覆盖前面的样式*/
        /* 选择器本身优先级大于书写顺序 */
        #first .active{
            color: tomato;
        }
        h1 {
            color: red;
        }
        h1 {
            color: violet;
        }
        .active {
            color: teal;
        }
        #first {
            color: tomato;
        }
    </style>
</head>
<body>
    <h1 class="active" id="first">
        初次(美好的邂逅)，爱···需要遇见,初次···需要呵护~~~
    </h1>
</body>
</html>
前端组件样式模块化的原理与实现
<!DOCTYPE html>
<html lang="zh-cn">
<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">
    <link rel="stylesheet" href="css/love.css">
    <title>前端组件样式模块化的原理与实现</title>
</head>
<!-- <style>
    @import url(css/header1.css);
    @import url(css/main1.css);
    @import url(css/footer1.css);
</style> -->
<body>
    <header align="center"><h2>如果说浑身充满力量</h2></header>
    <main><h2>是因为雄性激素的膨胀</h2></main>
    <footer align="right">那<strong class="active">雄起</strong>是因为什么~~~</footer> 
    <!-- 在根目录创建一个CSS文件夹，在里边创建3个文本header,main,footer,分装入各自的样式，
    然后统一使用<link rel="stylesheet" href="css/xxx.css">调用 -->
</body>
</html>

实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）

实例演示选择器的优先级,id,class,tag

相关文章