css选择器

1. 类选择器 .class

// 选择 p && class="intro" 的所有元素。
p.intro {
}

2. ID选择器 #id

// 选择 选择 p && id = footer的元素
p#footer {
}

3. 元素选择器 p

p {
}

4. 状态选择器(伪类 ) :status

p:first-line {
}
// 未访问
a:link { 
}
// 已访问
a:visited {
}
// 悬停
a:hover {
}

5. 位置选择器(伪元素)

p:first-letter {
}
p:first-line {
}

6. 属性选择器

// 所有包含width属性的元素
img[width] {
}
// 所有height等于300的元素
img[height = "300"] {
}

7. 兄弟选择器

// 选的p(p满足前一个兄弟节点是h1)
h1+p {
}

8. 结合选择器

// 选的p中的p(第一个p满足前一个兄弟节点是h1)
h1+p p{
}
// id为 greentea的div中的blockquote
div#greentea > blockquote{
}
// id为 greentea的div中的blockquote中的p
div#greentea > blockquote p{
}
// id为 greentea的div中的blockquote中的有first-line属性的p
div#greentea > blockquote p:first-line{
}