1.1 选择器语法

选择器{ 样式1;样式2;样式3;……}

1.2 CSS基本选择器

（1）标签选择器

语法:

标签{样式1;样式2;}

p{

font-weight: bolder;

color:darkslategray;

font-family: "微软雅黑";

(2) 类选择器

.box2{

border:dotted 2px blue;

Html使用类

<div class="box2">box2</div>

<div class="box2">box3</div>

(3) id选择器

/*Id选择器*/

#top{

height: 120px;

#middle{

height: 500px;

#bottom{

height: 200px;

background: #ccc;

html中使用：

<div id="top">

<a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a>

box1

</div>

<div id="middle">

<a href="#">产品1</a>

<a href="#">产品2</a>

<a href="#">产品3</a>

<a href="#">产品4</a>

box2

</div>

<div id="bottom">

<a href="#">友情链接</a>

box3

</div>

(4)通配符选择器

*{

样式1;

样式2;

*{

padding: 0;

margin: 0;

(5)包含选择器

语法：

E1 E2

table td { font-size:14px; }

.prolist{

width: 200px;

border: solid 1px gray;

.prolist h3{

height: 40px;

line-height: 40px;

text-indent: 20px;

.prolist ul li{

text-indent: 20px;

border-bottom: dotted 1px gray;

Html部分:

<div class="prolist">

<h3>产品导航</h3>

<ul>

<li><a href="">热卖产品</a></li>

<li><a href="">打折产品</a></li>

<li><a href="">特价产品</a></li>

<li><a href="">电子数码</a></li>

<li><a href="">游戏</a></li>

</ul>

</div>

(6) 子选择器

语法：

E1 > E2

<style type="text/css">

/*子选择器*/

body>div{

border: solid 1px gray;

margin: 5px;

</style>

<div>

这是第一个的段落

<div>

这是第一个段落中嵌套的段落

</div>

</div>

<div>

这是第二个段落