您的位置：首页 > 其它

11选择器（id选择器，类选择器，标签选择器）

2016-09-05 09:23 381 查看

1、id选择器

#box{ }

<style>

#box{ ................. }

<style>

<body>

<div id="box"></div>

<body>

特点：每一个标签只能有一个ID。

2、类选择器

.类名{ }

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.box{width: 100px;height: 100px;background: blue}
.box2{border:5px solid red;}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
</div>
<div>
<span>
<p>p3</p>
</span>
</div>
<div class="box">块</div>
<div class="box box2">块</div>
<div class="box">块</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>

特点：一个标签可以有多个类选择器修饰，类之间空格隔开

3、标签选择器

标签{ }

定义标签选择器后，该页面的这个标签全部被这个类修饰，而且可以定义标签之间的包含关系

如 div span p{width: 100px;height: 100px;background: blue} 表示为div——span——p

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
div span p{width: 100px;height: 100px;background: blue}
.box2{border:5px solid red;}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
</div>
<div>
<span>
<p>p3</p>
</span>
</div>
<div class="box">块</div>
<div class="box box2">块</div>
<div class="box">块</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>

优先级：1.标签选择器< 类型选择器 < id选择器 < style行间样式 < js样式

2.同级样式，默认按照定义样式的顺序，后者覆盖前者

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航