class 和 id 的使用场景

class：（.class）一个标签可以有多个类且同一个类可以用到不同的标签上，适用于多个元素有共同的样式。
id：（#id）一个标签只能有一个id且每个id只能使用一次，能够快速获取标签对象，适用于页面上唯一的元素。

常用的CSS选择器

• 基础选择器

• 组合选择器

• 属性选择器

• 伪类选择器

• 伪元素选择器

选择器的优先级

优先级由高到低：(注：继承的权值最低)

1. !important：在属性后面使用，会覆盖页面内任何位置定义的元素样式
2. 内联样式：作为style属性写在标签上的
3. id选择器
4. class选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通用元素选择器
9. 浏览器自定义

(注：继承的权值最低)

如何计算复杂场景的优先级

• id选择器默认优先级最高，其权值为100
• class选择器、属性选择器和伪类选择器的权值为10
• 标签选择器的优先级较低，其权值为1

在比较样式的优先级时，统计选择符中的id、class、标签名个数，然后把对应的权值相加即可。根据结果便可得出优先级高低。

• 结果较大的优先级较高
• 结果相同，则后定义的样式优先级较高
• 如果样式值中含有!important，则该值优先级最高

a标签的伪类选择器的定义顺序及原因

• 定义的顺序：a:link{}->a:visited{}->a:hover{}}->a:active{}
  (记忆口诀：LV哈！小仙女们，为了我们的LV；大兄弟们，为了你们老婆的LV，好好学习前端吧_.)

• 原因：

• 样式覆盖：优先级相同的选择器，写在后面的会覆盖前面的。
• 当链接未被点击时，正常状态只有a:link有效。
• 当使用过程中，即鼠标经过链接时，a:link和a:visited生效，我们需要显示hover，所以a:hover在a:link后。
• 当鼠标处于点击与释放链接之间，且链接之前被点击过，a:visited，a:hover和a:active生效，我们需要显示active，所以a:active在a:hover。
• visited是已访问过的，如果写在最后，当鼠标悬停在a标签上时，也会有visited属性，所以a:visited需要在a:hover和a:active之前。

说明下列选择器的含义

简析div:first-child和div:first-of-type

例1：

<div><!--整个div都选中--> 
<span>This span is limed!</span> 
<span>This span is not. :(</span> 
</div>```
例2：

<div>
<span>This span is first!</span>
<span>This span is not. :(</span>
<span>what about this <em>nested element</em>?</span>
<strike>This is another type</strike>
<span>Sadly, this one is not...</span>
</div>```
例3：

<div>
 <span>This span is limed!</span><!--选中-->
 <span>This span is not. :(</span>
</div>

例4：

<div>
 <span>This span is first!</span><!--选中-->
 <span>This span is not. :(</span>
 <span>what about this
 <em>nested element</em><!--选中-->
 </span>
 <strike>This is another type</strike><!--选中-->
<span>Sadly, this one is not...</span>
</div>

运行代码 解析原因

代码

输出样式

分析：

1. .item1:first-child{}：匹配 id="item1 "的父元素（即<div class="ct">）下第一个子元素，即<p class="item1">aa</p>，所以aa显示为红色字体。
2. .item1:first-of-type{}：匹配 id="item1 "的父元素（即<div class="ct">）下使用同种标签的第一个子元素，即p标签和h3标签各自对应的第一个子元素<p class="item1">aa</p>和 <h3 class="item1">bb</h3>，所以aa和bb的背景颜色为蓝色。