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

Renascence.409

已于 2024-08-02 16:18:52 修改

阅读量667

点赞数 13

分类专栏：前端学习文章标签： css 学习前端

于 2024-08-02 16:18:35 首次发布

本文链接：https://blog.csdn.net/qq_63898506/article/details/140871471

版权

前端学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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区别

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

媒体查询

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

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

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备，这个应该经常看到。

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器