[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 选择器)是华山派首徒,平时是可以“为所欲为”的
[Web 前端] 007 css 常见的七种选择器的更多相关文章
- CSS 常见的8种选择器 和 文本溢出问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- WEB前端性能优化常见方法
1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/arti ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 常见的七种Hadoop和Spark项目案例
常见的七种Hadoop和Spark项目案例 有一句古老的格言是这样说的,如果你向某人提供你的全部支持和金融支持去做一些不同的和创新的事情,他们最终却会做别人正在做的事情.如比较火爆的Hadoop.Sp ...
随机推荐
- docker常用命令及操作
1).镜像操作 操作 命令 说明 检索 docker search 关 键 字 eg:docker search redis 我们经常去docker hub上检索镜像的详细信息,如镜像的TAG. 拉取 ...
- hashcode 和 equals
https://www.cnblogs.com/Qian123/p/5703507.html#_label0 hashCode是jdk根据对象的地址或者字符串或者数字算出来的int类型的数值 详细了解 ...
- canvas合并两张图片
解析: 原理是一样的 画多张图需要一张一张画 也就是等图片onload成功后处理 这里代码写的比较随意 实际用的时候可以小粉转一下 也非常简单.我懒~~ 么么.. newImage(text) { / ...
- OCP
desc dba_objects; select * from dba_objects where rownum = 6; select owner, object_id from dba_objec ...
- day04记
useGeneratedKeys useGeneratedKeys这个只在insert语句中有效,正常情况下useGeneratedKeys默认为false 当useGeneratedKeys为tru ...
- HDU 6205 card card card ( 思维 )
题意 : 给定两个序列 a 和 b ,保证 a 数列的和 == b数列的和,从头到尾考虑 (a[i] - b[i]) 的前缀和,直到前缀和为负数则无法进行下去,所得的便是a[1~i]的和,现在有一个操 ...
- asp.net 5 如何使用ioc 以及在如何获取httpcontext对象
一切尽在大叔的博客中: http://www.cnblogs.com/TomXu/p/4496440.html
- Android 输入法截取key优先于view
为了验证编写了个例子 首先是输入法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 public class RemoteKeyboard exte ...
- UVALive 3958 Weird Numbers (负进制数)
Weird Numbers 题目链接: http://acm.hust.edu.cn/vjudge/contest/129733#problem/F Description Binary number ...
- Java数据结构与算法(3):队列
队列也是一种表,不同的是队列在一端进行插入而在另一端进行删除. 队列模型 队列的基本操作包括入队.出队操作.在表的末端插入元素,在表的开头删除元素,即先进先出(FIFO). 队列的数组实现 对于每一个 ...