CSS选择器详细讲解
###CSS选择器
CSS3选择器规范地址: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范: https://www.w3.org/TR/selectors
!---问题---!
1.css的全称是什么?
Cascading style sheets
2.样式表的组成
规则
选择器+声明块
声明
CSS合法的属性名+属性值
3.浏览器读取编译css的顺序?
从右到左
1.基本选择器
通配符选择器 * { margin: 0; padding: 0; border: none; }
元素选择器 body { background: #eee; }
类选择器 .list { list-style: square; }
ID选择器 #list { width: 500px; margin: 0 auto; }
后代选择器 .list li { margin-top: 10px; background: #abcdef; }
2.基本选择器扩展
子元素选择器 #wrap > .inner {color: pink;}
也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素
相邻兄弟选择器 #wrap #first + .inner {color: #f00;}
它只会匹配紧跟着的兄弟元素
通用兄弟选择器 #wrap #first ~ div { border: 1px solid;}
它会匹配所有的兄弟元素(不需要紧跟)
选择器分组 h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符
3.属性选择器
存在和值属性选择器
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]:表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为val。
子串值属性选择器
[attr|=val] : 选择attr属性的值是val(包括val)或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
4.伪类与伪元素选择器
伪类是为了拿到DOM树以外的动态
伪元素是为了拿到DOM树以外的元素
链接伪类 注意:link,:visited,:target是作用于链接元素的!
:link 表示作为超链接,并指向一个未访问的地址的所有锚
:visited 表示作为超链接,并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素,它的id是URI的片段标识符(#后面的内容)
动态伪类 注意:hover,:active基本可以作用于所有的元素!
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素(点击按住时)
由于a标签的:link和:visited可以覆盖了所有a标签的状态,所以当:link,:visited,:hover,:active同时出现在a标签
身上时 :link和:visited不能放在最后!!!
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接:
color
background-color
border-color
表单相关伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
结构性伪类
index的值从1开始计数!!!!
index可以为变量n(只能是n)
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别!!
nth-of-type以元素为中心!!!
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的,有空格都不行,有attr没关系)
伪元素
::after
::before
::firstLetter
::firstLine
::selection
5.css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如 0,0,0,0
一个选择器的具体特殊性如下确定:
1.对于选择器中给定的ID属性值,加 0,1,0,0
2.对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素,加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势
注意:id选择器和属性选择器
div[id="test"](0,0,1,1) 和 #test(0,1,0,0)
重要声明
有时某个声明比较重要,超过了所有其他声明,css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志
必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后,即分号的前面
标志为 !important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决
非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突,胜出的总是重要声明
继承
继承没有特殊性,甚至连0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重:
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠
1.找出所有相关的规则,这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
在按选择器的特殊性排序
最终按顺序
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 入坑 LinkedList,i 了 i 了
- Elasticsearch 利用API进行搜索
- 通过 Serverless Regsitry 快速开发与部署一个 WordCount 实例
- 聊聊dubbo-go的gracefulShutdownFilter
- 强烈推荐:2020年15道优秀的TypeScript练习题 (上集)
- 聊聊dubbo-go的GenericFilter
- Salesforce LWC学习(十九) 针对 lightning-input-field的label值重写
- MySQL定时备份方案
- Nginx多方面调优策略
- 太厉害了!这应该是目前Redis可视化工具最全的横向评测
- pip install时timeout设置
- 聊聊dubbo-go的TpsLimitFilter
- 聊聊dubbo-go的TokenFilter
- 你这磨人的小妖精——选中文本并标注的实现过程
- VUE跨页面传值的精妙