CSS
级联样式表 / 层叠样式表(Cascading Style Sheets)
样式表的组成
- 规则:
- 选择器+声明块
- 声明
- CSS合法的属性名+属性值
- 声明
- 选择器+声明块
浏览器渲染样式表的顺序:
从右往左
css选择器
- 基本选择器及其扩展
- 属性选择器
- 伪类与伪元素选择器
基本选择器及其扩展
- 通配符选择器 *
- 元素选择器 body(任何一个HTML元素)
- 类选择器 .
- ID选择器 #
- 后代选择器 空格
- 组合选择器 (#test.pink)
- 选择器的分组
用逗号隔开各个选择器(,结合符) - 基本选择器的扩展:
- 子元素选择器 使用>来选择。它不同于后代选择器,子元素选择器只是用来选择直接后代
- 相邻兄弟选择器 - 使用+来选择。只匹配紧跟着的同胞元素
通用兄弟选择器 - 使用~来选择。匹配后面的同胞元素(不需要紧跟)
- 相邻兄弟选择器 - 使用+来选择。只匹配紧跟着的同胞元素
- 子元素选择器 使用>来选择。它不同于后代选择器,子元素选择器只是用来选择直接后代
属性选择器
- 存在和值属性选择器
- [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
- [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)
中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。
- 子串值属性选择器
- [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素
- [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
- [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
- [attr*=val] : 选择attr属性的值中包含字符串val的元素。
伪类与伪元素选择器
伪类
-
链接伪类:
锚点伪类:
link:表示作为超链接,并指向一个未访问的地址的所有锚
visited:表示作为超链接,并指向一个已访问的地址的所有锚
目标伪类:
target: 代表一个特殊的元素,它的id是URI的片段标识符
-
动态伪类:
hover:悬浮到目标元素上
active:点击下去
-
表单相关伪类:
:disabled
:enabled
:checked(自定义单选按钮)
:focus -
结构性伪类:
ele:nth-child(index)
ele:nth-of-type(index) 以元素为中心
区别:
1.nth-child找到第index个子元素 这个子元素必须满足ele的规则 nth-of-type找到第index个ele子元素 2.nth-of-type以元素为中心
注意:
index可以是变量n(只能是n 0到正无穷) odd:奇数 even:偶数
伪元素:
::after
::before
声明的优先级
层叠由四个概念组成:
特殊性
重要性
来源
顺序
先按来源进行刷选
权重:
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
如果来源相同,按选择器的特殊性继续刷选
内联声明的特殊性都是1,0,0,0
对于选择器中给定的ID属性值,加 0,1,0,0
对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0
对于选择器中的给定的各个元素和伪元素,加0,0,0,1
通配符选择器的特殊性为0,0,0,0
结合符对选择器特殊性没有一点贡献
继承没有特殊性
选择器的特殊性如果相同,按顺序继续刷选
说明:
选择器的特殊性:
选择器的特殊性由选择器本身的组件确定,特殊性值表述为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.计算声明的优先级
先按来源排序
再按选择器的特殊性排序
最终按顺序