1. 标签选择器
<!-- body 体中的 div -->
<div>box...</div>
/* style 中的设置 */
*{
margin: 0; /* 边距属性 */
padding: 0; /* 内边距 */
}
div{
color: red; /* 设置文本颜色 */
}
- 补充:
- 上方的语句,如 padding:0; color: red; 末尾可以不加分号
- 因为它们在各自的最后一行
- 推荐都加上分号
2. id 选择器
- 通过 id 名来选择元素
- 元素的 id 名不能重复
- 一般不推荐使用 id 作为选择器
- 举例
<!-- body 体中的 div -->
<div id="box">box...</div>
/* style 中的设置 */
#box{
color: red;
}
3. 类选择器
- 影响范围相对较小
- 通过类名来选择元素
- 一个类可应用于多个元素
- 一个元素上也可以使用多个类
- 是 css 中应用最多的一种选择器
- 举例
<!-- body 体中的 div 等 -->
<div class="div_box">div_box...</div>
<h1 class="h1_box">h1_box...</h1>
<p class="p_box">p_box...</p>
/* style 中的设置 */
.div_box{
color: red;
}
.h1_box{
font-size: 20px; /* 字体大小 */
}
.p_box{
margin-top: 10px; /* 设置元素的上外边距 */
}
4. 层级选择器
- 主要应用在
- 可与标签元素结合使用,减少命名
- 可以通过层级,防止命名冲突
- 可以和多种选择器混合使用
- 举例
<!-- body 体中的 div 等 -->
<div class="div_box">
<span>span...</span>
<a href="#" class="a_h_box">a...</a>
</div>
<h3 class="a_h_box">h3...</h3>
/* style 中的设置 */
.div_box span{
color: red;
}
.div_box .a_h_box{
color: blue;
}
.a_h_box{
color: green;
}
5. 组织选择器
- 多个选择器,如果有同样的样式设置,可以使用组选择器
- 也称为并列选择器
- 举例
<!-- body 体中的 div -->
<div class="box1">box1...</div>
<div class="box2">box2...</div>
<div class="box3">box3...</div>
/* style 中的设置 */
.box1, .box2, .box3{
width: 100px;
height: 100px;
}
.box1{
background: blue;
}
.box2{
background: green;
}
.box2{
background: yellow;
}
6. 伪类选择器
- hover 是常用的伪类选择器,表示鼠标悬浮在元素上时的状态
- 举例
<!-- body 体中的 div -->
<div class="box">box...</div>
/* style 中的设置 */
.box:hover{ /* 此处的冒号前后不要加空格 */
color: red;
}
7. 伪元素选择器
- before 和 after 是伪元素选择器,它们可以通过样式在元素中插入内容
- 举例
<!-- body 体中的 div -->
<div class="box">
<a>123</a>
</div>
/* style 中的设置 */
a:hover{
color: red;
text-decoration: underline; /* 加下划线 */
} /* 鼠标在该元素上时 */
a:before{
content:"Hello";
} /* 在每个 <a> 元素之前插入 Hello */
a:after{
content:"World";
} /* 在每个 <a> 元素之后插入 World */
8. 关于选择器的优先级
- 影响范围越大的选择器优先级最低
- 个人觉得,有种“强龙不压地头蛇”的感觉
- 打个不太恰当的比喻
- 左冷禅(如标签选择器)是五岳盟主,执五岳令旗,霸权五岳剑派
- 岳不群(如类选择器)是华山派掌门,虽说要听那个左盟主的号令,但华山派的事还是自己说了算
- 令狐冲(如 id 选择器)是华山派首徒,平时是可以“为所欲为”的