实例演示选择器的优先级,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>
实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）
更多相关文章
- css_0630作业
- 字体样式调用、布局原则、盒模型等
- 表单，框架，选择器，css的三种插入样式（内联，外部样式，元素中）
- 将仿京东移动端首页的"秒杀区"样式
- 仿京东移动端首页的"部分"样式
- 7/30号作业
- 简单表单与css选择器实战案例
- 注册表单实战案例
- HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的