CSS学习笔记--初级版1

一、CSS填写

主要分为行内式、内嵌式、外链式。

• 行内式

  • 直接在标签的style属性中书写样式

  • 不需要选择器，在哪个标签上书写就是那个标签的样式

  • 不推荐此写法

• 内嵌式

  • 在页面中书写一个style标签

  • 以选择器的形式写书样式在style标签中

  • 选择器决定样式作用在哪些标签上

• 外链式

  • 把css样式写在一个文件中，文件后缀.css

  • 在当前页面中，使用link标签的href属性引入文件

二、选择器

1.基本选择器

• 标签选择器 根据标签决定

• 类选择器 根据类名决定

• id选择器 根据元素的id决定

2.结构选择器

• 后代

  • 选择器1 选择器2

  • 给选择器2添加样式，但是选择器2必须满足是选择器1的后代元素

• 子代

  • 选择器1 > 选择器2

  • 给选择器2添加样式，但是选择器2必须满足是选择器1的直系子元素

• 兄弟

  • 选择器1 + 选择器2

  • 给选择器2添加样式，但是选择器2必须满足是选择器1的下一个兄弟元素

• 兄弟

  • 选择器1 ~ 选择器2

  • 给选择器2添加样式，但是选择器2必须满足是选择器1的后面的兄弟元素

3.交集并集选择器

• 交集选择器

  • 选择器1选择器2

  • 注意：多个选择器之间不能有空格

  • 需要满足所有选择器的元素才能生效

• 并集选择器

  • 选择器1,选择器2

  • 只需要满足其中一个选择器就能生效

4.伪类选择器

• a标签

  • :link 默认状态

  • :visited 跳转链接后回来的状态

  • :hover 鼠标悬停

  • :active 鼠标按下但没有松开

  • 注意1：同一个a标签多个伪类选择器的时候，顺序必须是先link visited hover active(lvha)

  • 注意2: a标签的伪类是描述元素某一个状态的样式

• 其他标签

  • :hover 鼠标悬停

5.伪元素选择器

• ::before 在最前面

• ::after 在最后面

  • 特点：必须要有content样式，否则不会出现

+ 伪元素是一个行内元素

6.结构伪类选择器

• :first-child 第一个子元素

• :last-child 最后一个子元素

• :nth-child(xn + y) 第几个子元素(从1开始)

  • 注意：以上几个必须和前置选择器配套

• :first-of-type 第一个类型元素

• :last-of-type 最后一个类型元素

• :nth-of-type(xn+y) 第一个类型元素

7.状态伪类

• :checked 选中后的样式

• :empty 空标签

• :selection 鼠标选中后的文本样式

  • 注意：鼠标选中文本的样式

8.选择器优先级

• 优先级

  • 同类选择器作用在哪一个标签上的时候，优先用哪一个

  • 就近原则

• 权重

  • 不同类型的选择器作用在同一个标签身上的时候，优先使用哪一个

  • 计算权重

    • 通配符选择器 0

    • 标签选择器 1

    • 类选择器 10

    • id选择器 100

    • 行内样式 1000

    • 绝对权重 !important

    • 注意：某一个选择器的权重和叠加

      • 后代

      • 子代

      • 交集