02_03.常用选择器

来源：互联网发布：asp在线报名系统源码编辑：程序博客网时间：2024/06/16 10:58

1.class选择器（当多个tag，需要赋予相同的属性的时候，同时使用class选择器控制）

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="test/html;charset=utf-8"><style type="text/css">#box1{width:100px;height:100px;background:red;}#box2{width:100px;height:100px;background:red;}</style> </head><body><div id="box1">块儿</div><div id="box2">块儿</div></body></html>

——————-我是分割线（上下两段代码，显示效果一致）———————

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">.box{width: 100px;height:100px;background:red;}</style></head><body><div class="box">块儿</div><div class="box">块儿</div></body></html>

2.同一个tag，可以使用多个class选择器

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">.box{width: 100px;height:100px;background:red;}.blue{background: blue;}</style></head><body><div class="box">.box控制我</div><div class="box blue">.box和.blue同时控制我</div></body></html>

3.标签选择器（控制所有一种类型的tag，使其有相同的样式）

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">div{width:200px;height:200px;border:solid 2px black;}p{width:100px;height:100px;background:red;}</style></head><body><div>div控制我<p>p控制我</p></div><p>p控制我</p></body></html>

4.子选择器（只控制div 下的，“所有” p标签）

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">div p{width:200px;height:200px;background: red; border:solid 2px black;}</style></head><body><div><p>div p控制我</p></div><div><h1><p>div p控制我</p></h1></div><p>div p不控制我</p></body></html>

5.通用选择器（控制所有tag）

<DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">*{border:solid 2px black;}</style></head><body><div>*控制我<p>*控制我</p></div><div>*控制我<h1>*控制我<p>*控制我</p></h1></div><p>*控制我</p></body></html>

0 0