CSS中常用的几种选择器是哪几种呢?
CSS中常用的选择器:
(一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器
(五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素
(一)基本选择器
1.标签选择器:通过标签名获取元素 权重:0001
(此种选择器影响范围大,建议尽量应用在层级选择器中。)
2.class选择器:通过 . 类名获取元素 权重:0010
(通过class类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。)
3.id选择器:通过 # id名获取元素 权重:0100
(通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。 )
4. * 通配符选择器:获取到页面的所有元素
5.群组选择器:用逗号隔开基本选择器,表示这些选择器都获取到
(二)层次/关系选择器
(主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。)
1.包含选择器:用空格隔开基本选择器,表示后一个选择器是前面的后代
例:p a { color:red; }
2.子代选择器:用>隔开基本选择器,表示后一个选择器是前面的子代
例:ul>li { line-style: none; }
3.相邻兄弟选择器:E+F:表示获取到E后面的紧跟着的F元素(同级的)
例: a+a { }
4.兄弟选择器:E~F:表示获取到E后面所有的同级的F元素
例: li~li { }
(三)动态伪类选择器
1. a:link 锚链接被访问前添加样式
2. a:visited 锚链接被访问后添加样式
3. e:hover 鼠标悬停在元素上添加样式
4. e:active 鼠标点击元素时添加样式
5. :focus 表单元素被聚焦时,添加样式
(四)目标伪类选择器
语法: 目标:target {属性:属性值} 被选中的目标添加样式
目标:target E子元素{属性:属性值} 被选中的目标里的E子元素添加样式
(五)ui状态伪类选择器
1. :enabled 可用的表单元素添加样式
2. :disabled 不可用的表单元素添加样式(disabled )
3. :checked+E 被选中的表单元素添加样式
(六)结构伪类选择器
1. E:first-child 获取到E元素,且要满足为其父元素的第一个孩子。
2. E:last-child 获取到E元素,且要满足为其父元素的最后一个孩子
3. E:nth-child(n) 获取到E元素,且要满足为其父元素的第n个孩子
n的用法:
(1)6n倍数 (2)even偶数/2n odd奇数/2n-1(如可用来选中奇偶行来实现 “隔行换色”)
(3) -n+5 选中1-5
(4)p:nth-child(-n+3):nth-child(n+2) 2-3个
4. E:nth-last-child(n) 获取到E元素,且要满足为其父元素的倒数第n个孩子
5. E:first-of-type 获取到E元素,且要满足为其父元素的第一个该类型的孩子
6. E:last-of-type 获取到E元素,且要满足为其父元素的最后一个该类型的孩子
7. E:nth-of-type(n) 获取到E元素,且要满足为其父元素的第n个该类型的孩子
8. E:nth-last-of-type(n)获取到E元素,且要满足为其父元素的倒数第n个该类型的孩子
9. E:empty 获取到空的E元素(注:连空格都不能有)
(七)属性选择器
1. E[attr] 拥0有attr属性的E元素添加样式 如div[class];
2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]
3. E[attr*="val"] attr属性值 包含 val的E元素添加样式
如ul[class="c"] 指class类名中包含有c字母的E元素
4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式
5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式
(八)伪元素
1. E::before给E元素添加第一个子元素 (前面)
div::before{content:"内容";display:block;width:100px;height:100px;}
2. E::after 给E元素添加最后一个子元素(后面)
3. E::first-letter给E元素第一个字添加样式
4. E::first-line给E元素第一行添加样式
5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)
CSS中常用的几种选择器是哪几种呢?相关推荐
- CSS中常用的伪类选择器
一 .伪类(不存在的类,特殊的类) -伪类用来描述一个元素的特殊状态 比如:第一个元素,被点击的元素,鼠标移入的元素··· -特点:一般请情况下,使用:开头 1. :first-child 第一个子元 ...
- CSS中常用的4种长度单位
在现实生活中,我们知道很多的长度单位,例如米,厘米,寸,尺等等,在css的世界中,也有很多的长度单位 以下是css中常用的四种常用的长度单位 1,像素 px - 像素是我们在网页中使用的最多的一个单位 ...
- css中什么是伪类选择器?伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
- Css中常用中文字体的Unicode编码对照
Css中常用中文字体的Unicode编码对照 在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便 ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- CSS中的nth-child和nth-of-type选择器
CSS中的nth-child和nth-type-of选择器 先写一个例子 <head><style>*{margin: 0px;padding: 0px;}.item{vert ...
- css中什么是伪类选择器?伪类选择器的简介
一.伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
- CSS中常用的选择器都有那些?
CSS选择器 分类: 基础选择器 标签选择器 类选择器 id选择器 通配符选择器 复合选择器(在demo5里) 标签选择器 标签名作为选择器 优点: 可以一次修改所有某一类的标签的样式 缺点: 没法区 ...
- CSS中常用选择器总结
以下为举例 基本选择器: div{border: 1px solid black;}p{color: green;}p>span[class="one"]{/*对段落中文字 ...
最新文章
- win10用什么软件测试硬件,Win10系统下硬件设备检测工具的使用方法
- 一位年轻董事长给大学生的18条好建议
- 如何重新划分swap分区
- 计算机count的功能是,全国计算机二级Access每日练习4
- myqltransactionRollbackexception deadlock found when trying to get lock
- kafka 脚本发送_NWPC消息平台:在ecFlow系统中发送产品事件消息
- mysql firebird 性能_Firebird, MySQL 与 PostgreSQL 代码质量对比
- python selenium iframe怎么定位_python+selenium 切换iframe
- 【BZOJ1206】【HNOI2005】虚拟内存,我也就能写写这种模拟题了
- 穷小子做网站赚钱终得丈母娘认可
- 注册表的学习 和 实例
- Ambari--告警管理
- HAXM 6.0.5显示不兼容Windows
- 技术人频道的一个问题——“程序员言”
- win7 手把手教你将win7背景色修改为浅绿保护色【包括资源管理器的背景】
- 支付宝-生成二维码实现url,实现支付
- Linux:进程(二)
- Android12 HDR相关
- 巨控GRM530远程模块与西门子上-300PLC远程上下载程序,远程在线调试程序
- 我用Python逆向登录世界上最大的游戏平台,steam加密手段有多高明【内附源码】