前端学习笔记(8)css选择器(二)
选择器的组合
选择器列表是一个由逗号分隔的复杂选择器序列;复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器;复合选择器则是连写的简单选择器。
选择器的连接方式可以理解为四则运算一样有优先级。
- 第一优先级:无连接符号,表示“且”
- 第二优先级:“空格”、“~”、“+”、“>”、“||”
- 第三优先级 :“,”表示“或”
复杂选择器规定了五种连接符号。 - “空格”:后代,表示选中所有符合条件的后代节点, 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。
- “>” :子代,表示选中符合条件的子节点,例如“ .a>.b ”表示:选中所有“具有 class 为 a 的子节点中,class 为 b 的节点”。
- “~”: 后继,表示选中所有符合条件的后继节点,后继节点即跟当前节点具有同一个父元素,并出现在它之后的节点,例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中,class 为 b 的节点。
- “+”:直接后继,表示选中符合条件的直接后继节点,直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。
- “||”:列选择器,表示选中对应列中符合条件的单元格。
实际使用中“空格”、“>” 使用的比较常见。
选择器的优先级
- id选择器的数目记为a;
- 伪类选择器、class选择器和属性选择器的数目记为b;
- 伪元素选择器和标签选择器的数目结尾c;
- “*”不影响优先级。
specificity = base * base * a + base * b + c
其中base是一个足够大的正整数。
行内属性的优先级永远大于css规则。浏览器提供了“!important”关键字优先级高于行内属性,不推荐使用。
不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。
<input type="text"/> [type]{ } [type="text"]{ } [type^="t"]{ }
同一优先级的选择器遵循后面的覆盖前面的原则。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
前端学习笔记(7)css选择器(一)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。 选择器类别:用逗号分隔的复杂选择器,表示“或”。 简单选择器 简单选择器分类: 类型选择器 全体选择器 id选择器 class选择器 属性选择器 伪类选择器 伪元素选择器 类型选择器 根据标签名来选中元素。 div{ } 全体选择器 “*”可以选中任意元素。 *{ } id选择器 “#”后面跟id名。 #myid{ } class选择器 “.”后面跟class名 c 一个元素可以拥有多个类。下例中“.a” “.b” “ .c”都可以选中div标签。 <div class="a b c"></div> .a{ } 属性选择器 第一种,[att]: 选中带有att属性的元素 <input type="text"/> [type]{ } 第二种,[att=val]: 选中att属性值为val的元素 &...
- 下一篇
前端学习笔记(9)css grid网格布局
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。 容器属性 1. display属性 指定一个容器采用网格布局 div { display: grid; } div { display: inline-grid; //设置为行内元素 } 注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 2. grid-template-columns 属性,grid-template-rows 属性 grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; gr...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果