文章目录

• 1. `*` universal selector,
• 2. type selector
• • 2.1 如果要选择多种不同类型
  • 2.2 设置所有 span，以及 class 为 "red" 的 li 背景色为red：
  • 2.3 选择元素内部的元素，即子元素
  • • 2.3.1 设置所有 `ul` 内的 `li` 背景色为 green：
    • 2.3.2 设置 `div` 内的 `p` 背景色为 yellow，嵌套多少层无关紧要，只要是在 `div` 元素内部就可以。
    • 2.3.3 选择 `div` 内class为`div-inside`的元素并设置背景色：
• 3. class selector: 点号 + 类名:
• • 3.1 type selector + class selector
  • 3.2 type selector + 多个 class
• 4. id selector: # 符号 + id 名称,
• 5. direct child selector
• 6. Siblings selector 兄弟选择器
• • 6.1 选择某一元素的所有兄弟，用 `~` 符号
  • 6.2 选择某一元素的直接兄弟，用 `+` 符号
• 7. pseudo class selector
• • 7.1 `hover` (悬停)举例
  • 7.2 input `focus` (获得焦点)举例
  • 7.2 button `focus` 举例
  • 7.3 `required`
  • 7.4 `checked`, 应用于checkbox：
  • 7.5 `disabled`
• 8. 与元素在页面上位置相关的 pseudo class selector
• • 8.1 `first-child`
  • 8.2 `last-child`
  • 8.3 `nth-child`
  • 8.3 `nth-last-child`
  • 8.4 `only-child`
  • 8.5 `first-of-type`
  • 8.5 `last-of-type`
  • 8.6 `nth-of-type`
  • 8.7 `nth-last-of-type`
  • 8.8 `only-of-type`
• 9. `not()`
• 10. pseudo elements selector 伪元素选择器
• • 10.1 `::before`
  • 10.2 `::after`
• 10.3 `::first-letter`
• 11. attribute selector

油鹳上的视频笔记：
在 jsbin.com 网站上可以十分方便地进行 HTML / CSS 测试。

1. * universal selector,

通用选择器 / 全体选择器。

选择页面上的每一个元素，包括: body div span ul li … 等等全部元素，例如选择页面上全部元素并设背景色为red：

* {
    background: red;
}

2. type selector

可选择某一类型的元素，例如: 全部的 div，全部的 span 等等，下面的 CSS 选择所有的 div，并设置背景色为 red：

div {
    background: red;
}

2.1 如果要选择多种不同类型

类型之间要用 逗号 隔开不同的元素，例如，设置所有 li 和 div 的背景色为蓝色：

div, li {
  background: blue;
}

2.2 设置所有 span，以及 class 为 “red” 的 li 背景色为red：

span, li.red {
  background: red;
}

2.3 选择元素内部的元素，即子元素

使用 空格 隔开具有层级关系元素。

2.3.1 设置所有 ul 内的 li 背景色为 green：

ul li {
  background: green;
}

2.3.2 设置 div 内的 p 背景色为 yellow，嵌套多少层无关紧要，只要是在 div 元素内部就可以。

div p {
  background: yellow;
}

2.3.3 选择 div 内class为div-inside的元素并设置背景色：

div .div-inside {
  background: lightgreen;
}

3. class selector: 点号 + 类名:

类选择器非常灵活，可任意选择元素，是使用最广泛的选择器。

.red {
  background:red;
}

3.1 type selector + class selector

选择具有某种 class 属性的某种元素，例如，选择所有class为red的div : 写法为 div.red , 中间不能有空格。

div.red {
  background: red;
}

3.2 type selector + 多个 class

写法举例：

div.red.white.green {
  background: red;
  color: white;
  border: 2px solid green;
}

4. id selector: # 符号 + id 名称,

#blue {
  background:blue;
}

关于 id 属性： 一个页面上 id 可以设置多次，但每个 id 都必须唯一：

<!-- 写法正确 -->
<h2 id="C1">Chapter 1</h2>
<h2 id="C2">Chapter 2</h2>
<h2 id="C3">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

<!-- 错误！ C4 重复了若干次 ！ -->
<h2 id="C4">Chapter 1</h2>
<h2 id="C4">Chapter 2</h2>
<h2 id="C4">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

也因为这个原因，一个 id 选择器只能选择页面上的一个元素，id 选择器不是很常用。

5. direct child selector

选择所有的孩子用空格，不限制嵌套级数。但是选择直接孩子用大于号 > ：

body > p {
  background: pink;
}

6. Siblings selector 兄弟选择器

不管是所有兄弟还是直接兄弟都是指的某一元素***后面***的元素，前面的不算。

6.1 选择某一元素的所有兄弟，用 ~ 符号

选择 class 为 red 的 li 之后 的所有兄弟 li。 所以 Item 1 虽然同为 Item 2 的兄弟，但是并没有匹配到：

li.red ~ li {
  background: red;
}

6.2 选择某一元素的直接兄弟，用 + 符号

类似于上例，但是此时匹配到的兄弟只有一个，紧跟 li.red 即 Item 2 后面 的 li 即Item 3，

li.red + li {
  background: red;
}

同理，下面的css没有匹配到任何元素，因为 Item 2 的直接兄弟 Item 3 并没有 green 属性：

li.red + li.green {
  background: green;
}

7. pseudo class selector

伪类选择器也是重要的选择器。伪类选择器基于用户如何同页面交换而对元素进行样式设定。

伪类选择器在选择的元素后面加 冒号。

7.1 hover (悬停)举例

下面的例子，光标移动到任何一个li上, li 的背景色就变为 green (cursor 在截图中没有体现出来).

li:hover {
  background: green;
  cursor: not-allowed;
}

7.2 input focus (获得焦点)举例

如果鼠标点击 input 元素，input 将获得焦点变成输入状态，背景色同时变为设置的 lightgreen:

input:focus {
  background: lightgreen;
}

7.2 button focus 举例

表单的 input 和 button 元素最常用到 focus：

button {
  display: block;
}

button:focus {
  background: purple;
  color: white;
}

7.3 required

下面的 css 选择具有required属性的 input 元素并设置背景色为 lightblue:

input:required {
  background:lightblue;
}

7.4 checked, 应用于checkbox：

下面的例子，由于复选框的背景色无法修改，所以设置勾选时复选框变大，反之亦然。

input:checked{
  transform: scale(6);
  margin: 100px;
}

7.5 disabled

以 checkbox 为例， disabled属性为true时放大复选框：

8. 与元素在页面上位置相关的 pseudo class selector

8.1 first-child

指的是 容器内的第1个子元素。
下面的css 匹配 ul 的第1个 li，即 Item 1：

li:first-child {
  background: pink;
}

相比之下，下面的css不会匹配任何元素，因为li.red是ul的第2个孩子，不是第1个孩子 first-child。不会选择匹配css的第1个元素，一定要是 first child。

li.red:first-child {
  background: pink;
}

8.2 last-child

和 first-child 相似，选择最后一个 child：

li:last-child {
  background: red;
}

8.3 nth-child

需要传递参数，参数可以为公式：
nth-child(3) 选择第 3 个 child 元素
nth-child(2n) 选择所有第 偶数 个 child 元素
nth-child(2n-1) 选择第 奇数 个 child 元素
nth-child(4n) 选择第 4，8， 12… 个 child 元素
依此类推。

下面的例子，选择第 3， 6， 9…个 li 并设置背景色：

li:nth-child(3n) {
  background: lightgreen;
}

8.3 nth-last-child

与 nth-child 类似，只是 自底向上 开始数，方向相反：

li:nth-last-child(2n-1) {
  background: lightgreen;
}

8.4 only-child

与前面的选择器类似，选择是容器内是唯一 child 的元素：

div:only-child, p:only-child,
span:only-child {
  background: red;
}

8.5 first-of-type

顾名思义，容器内指定类型的第1个元素：

span:first-of-type {
  background: red;
}

8.5 last-of-type

与first-of-type类似，容器内指定类型的最后1个元素：

li:last-of-type {
  background: blue;
}

8.6 nth-of-type

与 nth-child 类似，可传参数

8.7 nth-last-of-type

8.8 only-of-type

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.
指定类型的元素如果没有相同类型的兄弟：

9. not()

取反。
下面的 css 选择全部没有 class 为 green 的 li 元素：

li:not(.green) {
  background: yellow;
}

10. pseudo elements selector 伪元素选择器

10.1 ::before

例子：

div.red::before {
  content:'BEFORE';
  background: red;
}

10.2 ::after

例子：

div.red::after {
  content:'After...........';
  background: red;
}

10.3 ::first-letter

MDN 上的例子，实现全文第1个段落首字母大写：
h2 + p 指的是 h2 的直接兄弟，即全文第一个段落：

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

11. attribute selector

例子， text-must-be-white 是一个随意写的属性，css里此属性名称要放在***方括号***内，
（ 此属性可以有值，可以check是否匹配等，但估计不怎么会用到，就不写了。）

[text-must-be-white] {
  background:green;
  color:white;
}