css复合/属性选择器/伪类/伪元素

复合选择器

# 多元素选择器，同时匹配，逗号分隔
h1, h2 { color:#123456; }
# 后代元素选择器，空格隔开,匹配class为'clas'的所有后代元素p
.clas p { color:#123456; }
# 子元素选择器，匹配class为'clas'的直接子元素p
.clas>p { color:#123456; }
# 相邻元素选择器，匹配直接跟在div后的p元素
div p { color:#123456; }

伪类

pseudo-classes主要是根据状态改变元素的样式
用超链接元素a举例

# 注意伪类是一个冒号，伪元素是两个冒号
a:link{...}  未访问的链接样式
a:visited{...}  已被访问的链接样式
a:hover{...}  鼠标悬浮链接样式
a:active{...}  鼠标点击的一瞬间样式

伪元素

selector::pseudo-element {
  property: value;
}

# 常见的例如
::first-letter 第一个字母
::first-line 第一行
::before
::after

before/after通常要通过content属性为一个元素最前面/最后面**添加**修饰性内容
p::before { content: ... }

属性选择器

html的标签具有自己的属性
Css做渲染时可以根据属性来限制渲染的对象
格式是

p[attr]{...} 有attr的p
p[attr=value]{...} attr为value的p
p[attr^=value]{...} attr开头为value的p
p[attr$=value]{...} attr开头为value的p
p[attr*=value]{...} attr包括value的P