传统的CSS2.1选择器:
标签选择器:
选择页面上所有该种标签
通常用于标签的初始化
id选择器:
标签的id属性,页面上必须为一
id名称只能由字母,数字,下划线,短横线
#前缀指定id标签
class选择器:
class
点前缀
同一个类名可以作用在多个标签
同一标签可以同时属于多个类,类名用空格隔开
原子类:
.fs12{
font-size: 12px;
}
.fs14{
font-size: 14px;
}
复合选择器:
后代选择器:
空格表示后代
后代不一定是儿子
交集选择器:点
并集选择器:逗号
伪类选择器:
指定要选择的元素的特殊状态
LOVE HATE爱恨准则的顺序
超链接a的四种状态:
- link还未点击的连接状态
- visited访问过的连接状态
- hover鼠标悬停时的连接状态
- active是激活状态,鼠标点下去未松手时候的状态
元素关系选择器:
- 子选择器:大于号,父子关系
- 相邻兄弟选择器:加号
- 通用兄弟选择器:波浪线~,元素a后面的同层级元素b
序号选择器:
:first-child
:nth-child() bn+a
2n+1奇数,2n偶数
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
属性选择器:
^$*~|
img[alt|="参赛"]{
border: 1px solid rgb(243, 16, 16);
}
新增伪类
伪元素:双冒号
::before
::after
创建一个伪元素,在标签固有内容之前或之后添加内容
content属性
a::before{
content: '★';
}
::selection 文档中被用户高亮的部分
::first-letter 块级元素第一行第一个字母
::first-line块级元素第一行所有文字
层叠性:
多个选择器作用于同一个标签
严密的处理冲突规则:id>class>标签 权重
复杂选择器计算权重(id数,class数,标签数 )
叹号important提升权重,属性后面写