[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 ...
随机推荐
- MySQL数据库的自动备份与数据库被破坏后的恢复(3)
[2] 当数据库被修改后的恢复方法 数据库被修改,可能存在着多方面的原因,被入侵.以及相应程序存在Bug等等,这里不作详细介绍.这里将只介绍在数据库被修改后,如果恢复到被修改前状态的方法. 具体和上面 ...
- SpringBoot整合redis把用户登录信息存入redis
首先引入redis的jai包 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...
- 2016.5.21【初中部 NOIP提高组】模拟赛A 总结
这次比赛的题目看上去好像不难,但当开始仔细想的时候才发现,并没有那么简单. T1旅行:刚开始看到k<=4的时候还以为有题可以AC了,不过呢,还是毫无思路. T3Pty爬山:雨天的尾巴最近打了几道 ...
- 自己动手实现一个网络模型 python
转自:https://www.jianshu.com/p/4b30e1dd2252 common_funcs.py import numpy as np import matplotlib.pyplo ...
- UI Recorder安装与使用
现在的互联网公司,普遍在尝试并执行敏捷开发模式,那么必然要涉及到频繁的更新迭代,在每次更新迭代时,老功能的回归成为了老大难.当系统日益复杂,涉及到的回归点逐渐增多,UI自动化测试即使成本在大,也需要提 ...
- linux运维、架构之路-git版本管理
一.常见版本管理系统 1.SVN 集中式的版本控制系统,只有一个中央数据仓库,如果中央数据仓库挂了或者不能访问,所有的使用者无法使用svn,无法进行提交或者备份文件 2.Git 分布 ...
- win10 64 位安装 MySQL(mysql-5.7.17-winx64)
版权声明:本文为搜集借鉴各类文章的原创文章,转载请注明出处:http://www.cnblogs.com/2186009311CFF/p/6517470.html. win10 64 位安装 MySQ ...
- 获取第几个class
假如类名为a,如果是同级(兄弟元素)的,如:<ul><li class='a'></li><li class='a'></li></u ...
- UOJ418. 【集训队作业2018】三角形
http://uoj.ac/problem/418 题解 考虑激活每个节点时,它的每个儿子都是放满的. 那每一次的操作我们可以用一个二元组来表示\((w_i-\sum w_{son},\sum w_{ ...
- Java网络编程与NIO详解10:深度解读Tomcat中的NIO模型
本文转自:http://www.sohu.com/a/203838233_827544 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 ht ...