Html>选择符
2017-04-23 本文已影响0人
小小彭007
包含选择符
div span p{width:100px; height:100px;}
ps :(div 标签下的 span 下的 p 标题 宽高 100px)
id-选择符
通过 元素标签定义ID >>> id="box" 即可找到对应ID 设置属性
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:100px; height:100px; background:blue;}
/*
id 选择符
*/
</style>
</head>
<body>
<div id="box">块</div>
</body>
</html>
群组-选择符
群组选择符 定义是一群不同ID 有共同样式使用
#box2,#box1,#box3{width:100px; height:100px; background:blue;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box2,#box1,#box3{width:100px; height:100px; background:blue;}
/*
群组 选择符
*/
</style>
</head>
<body>
<div id="box1">块</div>
<div id="box2">块</div>
<div id="box3">块</div>
</body>
</html>
class(类) 选择符
class(类) 选择符[可以重复使用的id]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px; height:100px; background:blue;}
.box2{border:5px solid red;}
/*
class(类) 选择符[可以重复使用的id]
*/
</style>
</head>
<body>
<div class="box">块</div>
<div class="box box2">块</div>
<div class="box">块</div>
</body>
</html>
类型 选择符
每个标签 都可以定义成选择符
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{width:100px; height:100px; background:blue;}
/*
类型 选择符
*/
</style>
</head>
<body>
<div>块</div>
<div>块</div>
<div>块</div>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</body>
</html>
a 伪类
伪类用于各种选中样式
link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后）
