CSS学习：继承、权重关系、伪类选择器、媒体查询

1、具有继承性质的样式（可以被子元素继承）

color文字颜色 ；font-family字体族 ；font-size字体大小 ；  font-weight字体粗细；line-height行高；text-align文本对齐方式；visibility可见性；cursor鼠标指针样式。

2、不具有继承性质的样式（不能被子元素继承）

background-color背景颜色；border边框样式；margin外边距；padding内边距；width宽度；height高度；display显示方式；position定位方式。

3、继承关系中需要注意的地方

• 具有继承性质的样式会被子元素继承，如果父元素样式发生变化，子元素的样式也会随之变化。因此，在设置具有继承性质的样式时，需要考虑到可能影响到子元素的情况。
• 有时候需要阻止某些样式从父元素继承到子元素，可以通过在子元素上重新定义该样式来覆盖继承的样式。
• 继承性质的样式会一直向下传递，直到遇到一个定义了相同样式的元素。

1、选择器的权重

选择器的类型包括ID选择器、类选择器、属性选择器、伪类选择器、标签选择器、伪元素选择器、兄弟选择器、子选择器、后代选择器和通配符选择器。

• ID选择器: 权重为100
• 类选择器: 权重为10
• 属性选择器: 权重为10
• 伪类选择器: 权重为10
• 标签选择器: 权重为1
• 伪元素选择器: 权重为1
• 兄弟选择器: 权重为0
• 子选择器: 权重为0
• 后代选择器: 权重为0
• 通配符选择器: 权重为0

注意：当多个样式规则应用于同一个元素时，浏览器会根据选择器的权重值来决定哪个样式规则应该被应用，例如，如果有一个ID选择器和一个类选择器同时定义了相同的样式，ID选择器的样式将会覆盖类选择器的样式。但是，如果多个规则具有相同的权重值，则最后一个规则将被应用。

2、优先级规则

在CSS中，如果多个样式规则应用于同一个元素，则根据选择器的权重来决定哪个样式规则应该被应用。但是，如果多个规则具有相同的选择器权重，则根据优先级规则来决定哪个样式规则应该被应用。

• !important具有最高优先级，将覆盖其他规则的样式。

• 内联样式具有第二高的优先级，将覆盖外部和嵌入样式表中的所有选择器。

• ID选择器具有第三高的优先级，将覆盖类选择器、伪类选择器和属性选择器的样式。

• 类选择器、伪类选择器和属性选择器具有中等优先级，将覆盖标签选择器和伪元素选择器的样式。

• 标签选择器和伪元素选择器具有最低优先级，将被其他选择器的样式所覆盖。

1、动态伪类

• ：link 超链接未被访问的状态
• ：visited 超链接访问过的状态
• ：hover 鼠标悬停在元素上的状态
• ：active 元素激活的状态
• ：focus 获取焦点的元素

注意：

• 设置link 、visited 、hover 、active 动态伪类的时候，必须按照link 、visited 、hover 、active 的顺序对操作对象进行设置。
• 只有表单类元素才能使用:focus 伪类。

2、结构伪类

• :first-child 所有兄弟元素中的第一个

• :last-child 所有兄弟元素中的最后一个

• :nth-child(n) 所有兄弟元素中的第n个

• :first-of-type 所有同类型兄弟元素中的第一个

• :last-of-type 所有同类型兄弟元素中的最后一个

• :nth-of-type(n) 所有同类型兄弟元素中的第n个

• :empty 内容为空元素（空格也算内容）

• :only-of-type 选择没有同类型兄弟的元素

• :root 根元素

• :only-child 选择没有兄弟的元素

• :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个

• :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个

3、否定伪类

• ：not（选择器）

4、UI伪类

• :checked 被选中的复选框或单选按钮
• :enable 可用的表单元素（没有 disabled 属性）
• :disabled 不可用的表单元素（有disabled 属性）

5、语言伪类

• ：lang（）根据指定的语言选择元素

单位 rem em px vh vw区别

1. px表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的。px为绝对单位。

2. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。
3. rem，相对单位，相对的只是html根元素font-size的值。和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸。
4. vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。

媒体查询

媒体查询的功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

• not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

• only: 用来定某种特别的媒体类型。

• all: 所有设备，这个应该经常看到。