[Web 前端] 007 css 常见的七种选择器

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 选择器）是华山派首徒，平时是可以“为所欲为”的