[Web 前端] 007 css 常见的七种选择器
2024-10-07 11:13:11
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 选择器）是华山派首徒，平时是可以“为所欲为”的
最新文章
- javascript中的函数式声明与变量式声明
- 5天揭秘js高级技术-第一天
- 实现简单sed替换功能的python脚本
- String PK StringBuilder,传说就是传说，只有动手实验，才能得出确定的答案
- windows server 2008服务器 做raid0
- Javascript学习笔记(一)
- 拉电流（source current）与灌电流（sink current）
- html5本地存储 local storage
- GPS功能：百度路书自定义【轨迹回放】
- 【2017集美大学1412软工实践_助教博客】团队作业6——展示博客（Alpha版本）
- iOS开发解决json串中的NSNull类型
- async/await 执行顺序详解
- 用git工作的流程
- 通过js或jq增加的代码，点击事件或其他一些事件不起作用时
- linux上安装Docker
- 使用Hexo在github上搭建个人博客
- Laravel 5.2错误-----Base table or view not found: 1146 Table
- cisco ASA ios升级或恢复
- Bof基础实践
- git图解：代码区域总结