CSS常用的选择器有:
1. 标签选择器
- 设置选择器
div{
width: 100px;
/* 设置的属性 */
}
- 调用选择器
<div></div>
2. 类选择器
- 设置选择器
.lei{
width: 100px;
/* 设置的属性 */
}
- 调用选择器
<div class="lei">调用类</div>
3. id选择器
- 设置选择器
#id{
width: 100px;
/* 设置的属性 */
}
- 调用选择器
<div id="id">调用类</div>
注释:一般不推荐使用
4. 后代选择器
- 设置选择器
.houdai .houdai1{
width: 100px;
/* 设置属性值 */
}
- 调用选择器
<div class="houdai">
<div class="houdai1">我是后代</div>
</div>
5. 儿子选择器
- 设置选择器
.erzi>.erzi1{
width: 100px;
/* 设置属性值 */
border:1px solid red;
}
- 调用选择器
<div class="erzi">
<div class="erzi1">
我是儿子,我有边框
<div class="erzi2">我是孙子,我没有边框</div>
</div>
</div>
注释:有继承性的直接就继承
6. 兄弟选择器
- 设置选择器
.xiongdi+.xiongdi1{
width: 100px;
height: 200px;
/* 设置属性值 */
border:1px solid red;
}
- 调用选择器
<div class="xiongdi">我是xiongdi1的兄弟我有边框</div>
<div class="xiongdi1">
我是xiongdi的兄弟,我有边框
<div class="xiongdi1">
我是我爸的儿子,没有边框
</div>
</div>
7. 并集选择器
- 设置选择器
h1,div{
width: 100px;
height: 200px;
/* 设置属性值 */
border:1px solid red;
}
- 调用选择器
<div>我跟h1是并集关系所以我有边框</div>
<h1>我跟div是并集关系所以我有边框</h1>
8. 交集选择器
- 设置选择器
div.jiaoji{
width: 100px;
height: 100px;
/* 设置属性值 */
border:1px solid red;
}
- 调用选择器
<div class="jiaoji">我既是div标签又有jiaoji这个类所以我有边框</div>
9. 通配符(*)
- 设置选择器
*{
margin: 0;
padding: 0;
}
注释:通配符代表所有的选择器,所以不需要自己调用