id选择器
<style>
#div1{
width:200px;
height:200px;
background:#C03;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
class选择器：（用的比较多）
<style>
.div1{
width:200px;
height:200px;
background:#C03;
}
</style>
</head>
<body>
<div class="div1"></div>
<p class="div1"></p>
</body>
可以是几个class样式的组合
<style>
.div1{
width:200px;
height:200px;
background:#C03;
}
.div2{
border:3px solid #000;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<p class="div1 div2"></p>
<div class="div1">div2</div>
</body>
类型选择：
<style>
div{
background:#F09;
}
p{
background:#0F3;
}
</style>
</head>
<body>
<div>div1</div>
<p >p</p>
<div>div3</div>
</body>
包含选择器：
<style>
#box p{
background:#36F;
}
p{
background:#9F3;
}
</style>
</head>
<body>
<div id="box"><p>box中p</p></div>
<p>单独p</p>
</body>
群组选择器：
<style>
div,span{
background:#9C3;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>1span</span><span>2span</span>
</body>
*表示通配符：指所有的样式都是这样：
<style>
*{
background:#9C3;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>1span</span><span>2span</span>
</body>
扫一扫
2609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
