class 和 id 的使用场景?
class 就像人的名字，而 id 就是身份证号。
当多个元素需要用到相同的样式，可以取个class类名，一起共享样式。
id是唯一的，一个页面只有一个id名字，样式不能共享。
我常遇到见CSS选择器
| 选择器 | 栗子 | 描述 |
|---|---|---|
| .class | .some | 选择class="some"的所有元素 |
| #id | #one | 选择 id名="one"的元素 |
| element | p | 选择所有P标签元素 |
| element+element | div+p | 选择紧接div后的所有p元素 |
| element，element | div,p | 选择所有div和p元素 |
| element element | div p | 选择div内部的所有p元素 |
| element>element | div>p | 选择在父元素div里的p元素（只限于父元素） |
| [element1~element2] | div~p | 选择所有在div之后的p元素 |
| element.class | div.some | 选择所有div元素class名为some的元素 |
| [attribute] | [class] | 选择含有class属性的所有元素 |
| [attribute=value] | [target=_blank] | 选择所有target属性值为_blank的元素 |
| [:link] | a:link | 选择所有未被访问的链接 |
| [:visited] | a:visited | 选择所有已被访问的链接 |
| [:active] | a:active | 选择活动链接 |
| [:hover] | a:hover | 选择鼠标指针位于其上的链接 |
| [:focus] | div:focus | 选择当前得焦点的div元素 |
| [:first-child] | p:first-child | 选择以p元素的父元素下第一个所有p元素（不是父元素第一个p就获取不了） |
| [ :first-child] | div :first-of-type | 选择div第一个子元素 |
| [:before] | p:before | 在每个 <p> 元素的内容之前插入内容 |
| [:after] | p:after | 在每个 <p> 元素的内容之后插入内容 |
| [:first-of-type] | p:first-of-type | 选择此元素的父元素的所有第一个p元素 |
| [ :first-of-type] | div :first-of-type | 选择div下所有第一个类型子元素 |
| [:last-of-type] | p:last-of-type | 选择此元素的父元素的所有最后一个p元素 |
| [:nth-of-type(n)] | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 |
| [:nth-last-of-type(n)] | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数 |
选择器的优先级
全局优先级
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符> 浏览器默认样式
- important的权重为1000
- ID的权重为100
- 类的权重为10
- 伪类的权重为10
- 属性的权重为10
- 标签的权重为1
- 伪元素的权重为1
- 通配符的权重为0
伪类的顺序
那就先说要点击它的过程
1.进入网页还没点击首先看的是默认样式
2.点击链接之后的访问后的样式
3.要点击它首先要移上去 移入样式
4.鼠标点击的同时就是访问过程 访问中样式
:link、:visited、:hover、:active
样式表执行顺序是从上往下执行，顺序乱了有的样式会被覆盖。
这里看到 hover要比visited先访问，为什么还要写在 visited 之后，因为 这是css层叠样式表，当你点击链接之后看到的是visited状态，hover写在之前会被覆盖掉
:first-child 和 :first-of-type的区别
:first-child 选择以某父元素下第一个某元素前提是某元素前面没有其他元素。
:first-of-type 选择以某父元素下第一个某元素（根据它的类型）
css
html
效果
隐藏 溢出就会显示滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
}
网友评论