CSS基础(一)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

一、CSS选择器

1.选择器的分类

• 1.元素选择器 标签名
• 2.id选择器 #id
• 3.class类选择器 .class
• 4.伪类选择器 :元素的特殊状态
• 5.属性选择器
  [属性名 = "属性值"] 选取含指定元素的值
  [属性名 ^= "属性值"] 选取属性值以指定内容开头的元素
  [属性名 $= "属性值"] ···结尾的内容
  [属性名 *= "属性值"] ···包含的内容

2.选择器的组合

• 组合	效果
  .classA.classB	元素同时拥有A和B类
  .A .B	后代选择器 B在A后即可
  .A > B	子代选择器 B是A的子代才能满足
  A ~ B	通用兄弟选择器 B是A的兄弟
  A + B	相邻兄弟 B在A后面一个元素
  A,B	A B元素样式同时生效

3.优先级

• 选择器相同，则执行层叠

• 选择器不同，则根据选择器权重执行

  选择器	权重
  继承或者*	0000
  元素选择器	0001
  类选择器，伪类选择器	0010
  id选择器	0100
  行内样式 style=""	1000
  !important	∞无穷大

二、伪类/元素选择器

1.什么是伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态

2.伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::

3.子元素伪类

• 伪类	效果
  :last-child	选择最后一个子元素
  X:last-of-type	选择每个X元素是其母元素的最后一个
  :not(A)	选择所有除了A元素的元素
  X:nth-child(n)	选择X父元素第n个子元素
  X:nth-last-child(n)	选择X父元素倒数第n个子元素
  X:nth-of-type(n)	选择所有X元素的第n个X元素
  :nth-last-of-type(n)	选择所有X元素的倒数第n个X元素
  X:before	在X元素之前插入
  X:after	在X元素之后插入

三、CSS中的单位

1.css的长度单位

• 相对单位: em、ex、ch、rem、vw、vh、vmin、vmax、%
• 绝对单位: cm、mm、in、px、pt、pc

2. 'px'

px表示像素，px不是一成不变的，在移动端中存在设备像素比，px的实际大小是不确定的，但是px的值与其它元素没有关系，因此认为是绝对单位

3. 'em'

• em是相对长度,会根据当前元素的font-size来设置 -> 父元素 -> 根元素 一级一级来寻找
• 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
• 任意浏览器的默认字体高都是 16px

4.'rem'

• rem比em多了一个r,rem只会根据 根元素 html 来设置字体大小
• 1rem = font-size(html)
• 默认一样是 16px

5. 'vh vw'

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度