一个简单的html例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="information">
<div id="name">Zhou zhou</div>
<div id="age">24</div>
<p class="self-assessment">a girl who always wants to be better
<ul class="examples">
<li id="example1">do exercise</li>
<li id="example2">develop interest and train specialty</li>
<li id="example3">work hard</li>
</ul>
</p>
<a href="#">if you want to know more about me</a>
</div>
</body>
</html>
- ID选择器：唯一性
#name:{ } - 类选择器：选中一个或者多个
.self-assessmen{ } - 标签选择器
div{ } - 全局选择器
*{ } - 组合选择器
//任意选择器
#example1, #example2{ } //id为example1或者example2的元素
li#example1{ } //li标签内id为example1的元素
//后代选择器，不一定是子代
#information #example3{ }
//子代选择器
.examples>example1{ }
//毗邻选择器，仅仅是对相邻的那个li起作用
#exanples+li{ }
- 伪类选择器
a:link{ } // 未访问的链接
a:visited { } // 已访问的链接
a:hover { } // 鼠标移动到链接上
a:active { } // 选定的链接
ul:first-child{ } //ul的第一个子元素 CSS2
#information>:first-of-type{ } //id为information元素直接后代的同种元素的第一个 CSS3
CSS选择器的权重比较
单个选择器：
!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
越具体优先级越高
同样优先级写在后面的覆盖写在前面的
!important 优先级最高，但是要少用
扫一扫
5737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
