基本选择器

子元素选择器

• 概念：只能选择某元素的子元素
• 语法：父元素 > 子元素(Father > Children)

section > div {
    color: #f00;
}

相邻兄弟元素选择器

• 概念：可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素
• 语法：元素 + 兄弟相邻元素(Element + Sibling)

section > div + article {
    color: #f00;
}

通用兄弟元素选择器

• 概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
• 语法：元素 ~ 后面所有兄弟相邻元素(Element ~ Siblings)

section > div ~ article {
    color: #f00;
}

群组选择器

• 概念：将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
• 语法：元素1，元素2，...，元素n（Element1，Element2，...，Elementn）

section > article,
section > aside,
section > div {
    color: #f00;
    margin-top: 10px;
    background: #abcdef;
}

属性选择器

对带有指定属性的HTML元素设置样式。
使用CSS3属性选择器，可以只指定元素的某个属性，也可以同时指定元素的某个属性和其对应的属性值

类型1：Element[attribute]

为带有attribute属性的Element元素设置样式

a[href] {
    text-decoration: none;
}

类型2：Element[attribute="value"]

为带有attribute="value"属性的Element元素设置样式

a[href="#"] {
    color: #f00;
}

类型3：Element[attribute~="value"]

选择attribute属性包含 单词 "value"的元素，并设置其样式
注意：这里是单词"value"

a[class~="two"] {
    color: #ff0;
}

<a class="one two" href="#">attribute</a>    // 会选择到
<a class="two three" href="#">attribute</a>  // 会选择到
<a class="twothree" href="#">attribute</a>   // 不会选择到

类型4：Element[attribute^="value"]

设置attribute属性值以"value"开头的所有Element元素的样式

a[href^="#"] {
    color: #0f0;
}

类型5：Element[attribute$="value"]

设置attribute属性值以"value"结尾的所有Element元素的样式

a[href$="#"] {
    color: #00f;
}

类型6：Element[attribute*="value"]

设置attribute属性值包含"value"的所有Element元素的样式
注意：看清楚与类型3Element[attribute~="value"]选择器的不同

a[class*="two"] {
    color: #0ff;
}

<a class="one two" href="#">attribute</a>      // 会选择到
<a class="two three" href="#">attribute</a>    // 会选择到
<a class="twothree" href="#">attribute</a>     // 会选择到

类型7：Element[attribute|="value"]

选择attribute属性值为"value"或以"value-"开头的元素，并设置其样式
注意：这里的属性值为"value"，是指只有"value"属性

a[href|="#"] {
    color: #f0f;
}

伪类选择器

动态伪类

• 概念：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
• 锚点伪类
  :link：当链接没有被访问过的时候
  :visited：当链接已经被访问过的时候
• 用户行为伪类
  :hover：当鼠标在链接上划过的时候
  :active：当鼠标在链接上按下但是还没有弹起的时候
  :focus：当获取光标的时候

a:visited{
  color: #f00;
}

UI元素状态伪类

:enabled：可编辑状态的元素
:disabled：不可编辑状态的元素
:checked：每个已被选中的 input 元素（注意：只用于单选按钮和复选框，只有Opera支持）

input:disabled{
    background: #f00;
}
button:disabled{
    color: red;
}

CSS结构类(nth选择器)

• :first-child：选择属于其父元素的首个子元素的Element元素

section > div:first-child {
    color: #f00;
}

• :last-child：选择属于其父元素的最后一个子元素的Element元素

div:last-child {
    color: #f00;
}

• :nth-child(n)：匹配属于其父元素的第n个子元素的Element元素
  注意：n是一个简单表达式，取值从 0 开始计算。这里只能是"n"，不能用其他字母代替
  总结：这里的第几个子元素，就是我们平常说的第几个，也就是从第1个开始算起。

ul > li:nth-child(2) {
    background: #f00;
}

// 匹配属于其父元素的奇数个的Element元素
ul > li:nth-child(odd) {
    background: #f00;
}

// 匹配属于其父元素的偶数个的Element元素
ul > li:nth-child(even) {
    background: #f00;
}

• :nth-last-child(n)：匹配属于其父元素的第n个子元素的Element元素，从最后一个子元素开始计数

ul > li:nth-last-child(3) {
    background: #f00;
}

• :nth-of-type(n)：匹配属于其父元素的特定类型的第N个子元素
  总结：先筛选出特定类型的元素，然后再数第N个

div:nth-of-type(2) {
    color: #f00;
}

• :nth-last-of-type(n)：匹配属于其父元素的特定类型的第N个子元素，从最后一个子元素开始计数

div:nth-last-of-type(2) {
    color: #f00;
}

• :first-of-type：匹配属于其父元素的特定类型的首个子元素

div:first-of-type {
    color: #f00;
}

• :last-of-type：匹配属于其父元素的特定类型的最后一个子元素

div:last-of-type {
    color: #f00;
}

• :only-child：匹配属于其父元素的唯一子元素的元素
  总结：也就是没有其他兄弟元素的情况

article:only-child {
    background: #f00;
}

// 这个会选中
<section>
    <article>3</article>
</section>

// 这个不会选中
<section>
    <article>1</article>
    <article>2</article>
</section>

• :only-of-type：匹配属于其父元素的特定类型的唯一子元素的元素
  总结：可以有其他兄弟元素，但是元素本身这种类型只能有一个

article:only-of-type {
    background: #f00;
}

// 这个会选中
<section>
    <article>3</article>
</section>

// 这个也会选中
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>

• :empty：匹配没有子元素(包括文本节点)的元素

div:empty {
    background: #f00;
}

否定选择器:not(element/selector)

• 概念：匹配非指定元素/选择器的元素
• 语法：父元素:not(子元素/子选择器)
• 例子：

nav > a:not(:last-of-type) {
    border-right: 1px solid red;
}
// 最后一个a标签不会有右边框
<nav>
    <a href="#">first</a>
    <a href="#">second</a>
    <a href="#">third</a>
    <a href="#">fourth</a>
    <a href="#">fifth</a>
</nav>

div:not(p)
{
    color:#ff0000;
}
// 选中div标签中的span元素
<div>
    <span>这是 div 元素中的文本。</span>
    <p>test</p>
</div>

伪元素

概念：用于向某些选择器设置特殊效果
语法：元素::伪元素 (Element::pseudo-element)

• ::first-line：对Element元素的第一行文本进行格式化
  此伪元素只能用于块级元素。块元素中文本超过宽度会换行，所以可以对第一行进行格式化。而行级元素内的文本被认为是一行，所以无法适用。

div::first-line {
    color: #f00;
    font-weight: bold;
}

• ::first-letter：用于向文本的首字母设置特殊样式
  此伪元素只能用于块级元素。如果是中文，就给第一个字设置样式。

div::first-letter {
    color: #f00;
    font-size: 24px;
    font-weight: bold;
}

• ::before：在元素的内容前面插入新内容
  常用“content”配合使用

// 特点
// 1. 是第一个子元素
// 2. 是行级元素
// 3. 内容通过content写入
// 4. 标签中找不到对应的标签
// 5. 可以用一切CSS控制样式

div::before {
    content: "我在内容的前面";
}
<div>伪元素</div>

• ::after：在元素的内容后面插入新内容
  常用“content”配合使用，多用于清除浮动

// 特点
// 1. 是最后一个子元素
// 2. 是行级元素
// 3. 内容通过content写入
// 4. 标签中找不到对应的标签
// 5. 可以用一切CSS控制样式
// 6. 可用于清除浮动

div::after{
    content: "我在内容的后面";
}
<div>伪元素</div>

// 清除浮动的例子
header::after{
    display: block;
    content: "";
    clear: both;
}

• ::selection：用于设置在浏览器中选中文本后的背景色和前景色

div::selection {
    background: red;
    color: #ff0;
}