CSS 选择器

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;
}