20210712学习记录 | CSS相关知识点

20210712学习记录 | CSS相关知识点

css复合选择器

交集选择器

两个选择器

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

标签.类名

例：div.box{

}

( 用的相对来说比较少，不太建议使用。)

并集选择器

各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

通常用于集体声明

后代选择器

后代选择器又称为包含选择器。

• 用来选择元素或元素组的子孙后代。
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写爷爷父亲，再写儿子孙子。

可以是父子关系，也可以是祖孙关系，但最好不要超过3-4层

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。

• 子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个大于号 > 进行连接

（只能是父子，不能是其他）

标签显示模式

块元素

可以设置宽和高，独占一行（宽度默认浏览器页面100%）

常见的块元素

div ul ol li dl dt dd h1-h6 p table form

div为最典型的块元素

行内元素

宽和高设置不生效，默认宽度为自身内容的宽度

常见的行内元素

b strong a em i del s ins u span

span为最典型的行内元素

块元素和行内元素的区别

块级元素的特点：

（1）总是从新行开始。

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%。

（4）可以容纳内联元素和其他块元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

行内块元素

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

默认宽度就是它本身内容的宽度，宽度，高度，行高、外边距以及内边距都可以控制。

相互转换

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

容器包含元素

div 可以包含任意元素

span 不建议包含块元素

p 不能包含块元素

css三大特性

层叠性

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

继承性

是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。（子承父业）

对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

边框、外边距、内边距、背景、定位、元素高属性不具有继承性。

优先级

!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 – CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

特殊性

权重是可以叠加的

div ul li ------> 0,0,0,3

.nav ul li ------> 0,0,1,2

a:hover -----—> 0,0,1,1

.nav a ------> 0,0,1,1

#nav p -----> 0,1,0,1

注意：

1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。2.继承的权重是 0