CSS层叠样式表 (Cascading Style Sheets)思维导图

illusion

2022-07-26

浏览量: 7

三大特性思维导图

选择器思维导图

CSS层叠样式表

CSS层叠样式表思维导图

很多人对于前端中css的学习都很懵懵懂懂，我为大家整理了一些我在学习css前端是的一些知识点，内容包括三大特性、选择器

树图思维导图提供《CSS层叠样式表 (Cascading Style Sheets)思维导图》在线思维导图免费制作，点击“编辑”按钮，可对《CSS层叠样式表 (Cascading Style Sheets)思维导图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：7118d011f540d47e0e7c4b8c2e32cd12

思维导图大纲

三大特性

继承性

给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

注意

并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承

在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

继承性中的特殊性

a标签的文字颜色和下划线是不能继承的

h标签的文字大小是不能继承的

应用

一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

层叠性就是CSS处理冲突的一种能力

注意

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

优先级

当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

间接选中<直接选中

间接选中

继承，谁离目标标签比较近就听谁的

直接选中

相同选择器

谁写在后面就听谁的

不同选择器

优先级：id>类>标签>通配符>继承>浏览器默认

优先级权重

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

依次计算并比较:id, 类，标签的个数，每次只要有较大的就选择那个，如果都一样，谁写在后面就听谁的

注意

只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

选择器

标签选择器

根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式

标签名称{ 属性:值; }

注意

标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签

标签选择器无论标签藏得多深都能选中

id选择器

根据指定的id名称找到对应的标签, 然后设置属性

格式

#id名称{ 属性:值; }

id='id名称'

注意

每个标签都可以设置id，但同一个界面中id的名称是不可以重复的

id的名称遵循标识符规则

id一般留给js使用的

类选择器

根据指定的类名称找到对应的标签, 然后设置属性

格式

.类名{ 属性:值; }

class='类名'

注意

每个标签都可以设置类名，同一个界面中class的名称是可以重复的

专门用来给CSS设置样式的

每个标签可以同时绑定多个类名

后代选择器

找到指定标签的所有特定的后代标签, 设置属性

格式

标签名称1 标签名称2{ 属性:值; }

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

注意

后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代,无序

后代选择器必须用空格隔开

无限延伸：可以通过空格一直延续下去

混用：后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

子元素选择器

找到指定标签中所有特定的直接子元素, 然后设置属性

格式

标签名称1>标签名称2{ 属性:值; }

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意

子元素选择器只会查找儿子, 不会查找其他被嵌套的标签，顺序

用>符号连接，混用，无限延伸

如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

给所有选择器选中的标签中, 相交的那部分标签设置属性

格式

选择器1选择器2{ 属性: 值; }

注意

选择器和选择器之间没有任何的连接符号

混用

交集选择器仅仅作为了解, 企业开发中用的并不多

并集选择器

给所有选择器选中的标签设置属性

格式

选择器1,选择器2{ 属性:值; }

注意

并集选择器必须使用,来连接

混用

兄弟选择器

相邻兄弟选择器（CSS2）

通用兄弟

给指定选择器后面的所有选择器选中的所有标签设置属性

格式

选择器1~选择器2{ 属性:值; }

注意

通用兄弟选择器必须用~连接

通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

选中指定的任意标签然后设置属性

格式

同级别的第几个

:first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签

同级同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签

其他

:nth-child(odd) 选中同级别中的所有奇数 :nth-child(even) 选中同级别中的所有偶数 :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增 :nth-of-type(odd) 选中同级别中同类型的所有奇数 :nth-of-type(even) 选中同级别中同类型的所有偶数 :nth-of-type(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

根据指定的属性名称找到对应的标签, 然后设置属性

格式

attribute

根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]

找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性，用于区分input属性

[attribute^=value]

属性的取值是以什么开头的

[attribute$=value]

属性的取值是以什么结尾的

[attribute*=value]