CSS选择器及伪类

选择器的优先级排序

1.    ! important
          在属性的后面写上时，会覆盖掉其他属性
2.   行内样式，直接写在标签内
3.   id选择器
4.   class选择器（类选择器）
5.   标签选择器
6.   通配符选择器（*）
7.   浏览器的自定义属性和继承

序号即是优先级

---

属性选择器

title可以为任何值

[title=hello]
{
;
}

根据部分属性：

1. [title~=en]：意为元素含有由空格分隔的en的属性值
2. [title|=en]：意为元素含有由连字符 - 分隔的en开头的属性值

---

子串匹配属性选择器

---

特定属性选择类型

[attribute|="value"]{}
例如img[src|="figure"] {border: 1px solid gray;}
指定某一个属性的某一个单词-开头的元素进行设置，必须是整个单词

这种属性选择器最常见的用途是匹配语言值

---

CSS 后代选择器

例如p em {color:red;}

这个规则会把作为 p 元素 后代 的所有 em 元素的文本变为 红色

CSS 子元素选择器

例如p > em {color:red;}
这个规则会把作为 p 元素 子代 的所有 em 元素的文本变为 红色

结合后代选择器和子选择器

例如table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性

---

CSS 相邻兄弟选择器

例如h1 + p {color:red;}

紧接在 h1 元素后的 p 元素，且拥有相同的父元素, p 元素的文本颜色变为红色

只有从第二个开始的才会有效，因为第一个h1没有（哥哥）

还有一个是 ~ ，例如h1 ~ p {color:red;}，它会是 h1 元素后面的所有同级的 p 元素的文本颜色变为红色

---

CSS 伪类

1. :focus伪类可以设置当input元素被“关注时”的属性
2. :first-child伪类设置元素其父元素内的第一个该元素的属性
   例如p:first-child {font-weight: bold;}
3. :lang伪类
4. 关于链接未访问、已访问、鼠标停留、正在访问的伪类

---

CSS 伪元素

1. :first-line伪元素

用于向文本的首行设置特殊样式

"first-line" 伪元素只能用于块级元素

2. :first-letter 伪元素

用于向文本的首字母设置特殊样式

:first-letter 伪元素同样只能用于块级元素

3. :before 伪元素：在元素的内容前面插入新内容

4. :after 伪元素：在元素的内容之后插入新内容

示例 p:before/after {content: ;}

---