选择器

来源:互联网 发布:马赛克视频还原软件 编辑:程序博客网 时间:2024/06/04 19:23

 

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>

 

 

 

 

 

 

 

 

0 0
原创粉丝点击