1. 选择器
1. id 选择器
也叫身份选择器，选取带有 id 属性，并且 id 属性值为 id-name 的 tag。
- html 写法：
<tag id="id-name"></tag> - css 写法：
#id-name{} - 整个 html 页面必须是唯一的，一个 id 属性值只能被一个 tag 拥有
- 值除了第一个字符必须为英文字母以外，后续字符可以是大小写字母和
-、_
2. class 选择器
选取所有带有 class 属性，并且 id 属性值为 id-name 的 tag。
- html 写法：
<tag class="class-name"></tag> - css 写法：
.class-name{} - 一个 tag 可以使用多个 class
3. tag 选择器
选取所有相同的 tag
- html 写法：
<tag></tag> - css 写法：
tag{} - 如果在 tag 后面加上 id 或者 class 选择器，代表只能套用到相同 tag 后的 id 或者 class 上。例如 div.container 只能对 下的 container class 生效
4. 运用空格
选取并修饰某种 class 修饰的 tag 下的所有子 tag ，不包括该 tag 本身
- html 写法：
<tag1 class="container" id="a"><tag id="b"><tag id="c"></tag></tag><tag id="d"></tag></tag1> - css 写法：
.container tag{} - 此时，会选取带有 container 类属性值的所有元素下的所有子 tag 元素，即修饰 b、c、d
- 这里的空格只是起到将字符串分割出 token 的作用，连续空格算一个空格。所以确切含义是一个 token 紧接着另一个 token
5. 运用大于号(>)
选取某种 class 修饰的 tag 下的所有第一层子 tag，不包括该 tag 本身
- html 写法：
<tag class="container"id="a"><tag id="b"><tag id="c"></tag></tag><tag id="d"></tag></tag> - css 写法：
.container > tag {} - 此时，修饰 b、c
- 大于号本身已经将字符串分割出两个 token ，大于号本身算一个 token ，在 token 之间加空格只是用来美化代码
6. 运用加号(+)
选取与某种 class 修饰的 tag 紧接着的第一个兄弟 tag 生效，tag 本身不生效
- html 写法：
<tag class="container" id="a"><tag id="b"></tag><tag id="c"></tag></tag> - css 写法：
.container + tag {} - 此时，修饰 b，但如果紧接着的第一个 tag 加号后声明的，则不会生效
7. 运用波浪号(~)
选取所有某种 class 修饰的 tag 之后所有同一层的所有某种元素
- html 写法：
<tag1 class="container" id="a"><tag id="b"></tag></tag><tag id="c"></tag><tag id="d"></tag> - css 写法：
.container ~ tag{} - 此时，修饰 b、d
8. 运用星号(*)
表示选取所有 tag ，一般配合前面的几种一起使用，缩小范围
- html 写法：
<tag1 class="container" id="a"><tag id="b"></tag></tag><tag id="c"></tag><tag id="d"></tag> - css 写法：
.container * {} - 此时，修饰 b、c、d
9. 属性选择器
通过 tag 的属性进行选择
- html 写法：
<a href="https:www.123.com"> - css 写法：
a[href="https:www.123.com"]{} - 此时，修饰 a 标签下 href=”https:www.123.com“
[id^="keywords"]：取 id 值开头为关键词 keywords 的所有元素[id$="keywords"]：取 id 值结尾为关键词 keywords 的所有元素[id*="keywords"]：取 id 值包含关键词 keywords 的所有元素
10. 伪类(pseudo class)
用于选择一般选择器无法表达的选择方式
- 写法格式：以上九种形式加冒号加条件
- html 写法：
- css 写法：
<a href:"...">点我</a><p>A</p><p>B</p> a: hover{color:red}/鼠标悬停变红/a: visited{color: cyan}/点击过该链接则为天蓝色/a ~ p:nth-child(2n){}/效果和a~p:nth-child(even){}一样/
- html 写法：
