CSS基础知识拾遗（1）

CSS

书写位置

内嵌

• 标签中直接写

外链

• 引入单独.css文件

行内

• 标签的style属性(不常用)

@import url(images/style.css);

(不常用)先渲染后加载

基本语法

选择器

大括号对

属性名:属性值;(最后一条可不写;)

注释/**/

选择器

CSS2.1

• 标签(元素、类型)

  • 直接使用元素标签名，对页面所有该类标签生效

  • 用于标签的初始化

• id

  • 唯一

  • #前缀

  • 命名规范：字母、数字、下划线、短横，不以数字开头，区分大小写

• class

  • 命名规范同上

  • .前缀

  • 不唯一且同一标签可分属不同类（空格隔开）

  • 如果一个标签指定多个类冲突，按照CSS样式表先后顺序，后者覆盖前者

  • 原子类

• 复合

  • 后代

    • 空格表示后代（所有后代）

    • 多个空格可以实现多代

  • 交集

    • 点隔开

  • 并集

    • 逗号隔开

• 伪类

  • a:link

    • 未被访问的

  • a:visited

    • 访问过的

  • a:hover

    • 鼠标悬停

  • a:active

    • 正被按下

  • 需要按顺序，否则不生效

css3

• 元素关系

  • 子选择器

    • • 仅匹配父子

  • 相邻兄弟选择器

    • • 首个紧跟着的

  • 通用兄弟选择器

    • ~

      • 往后所有同级别的

• 序号

  • :first-child

  • :last-child

    • 倒数第一个

  • :nth-child(n)

    • 第n个

  • :nth-of-type(n)

    • 第n个某类

  • :nth-last-child

  • :nth-last-of-type(n)

  • （比较复杂，需要单独整理）

• 属性

  • 标签[属性]

    • 具有这个属性的标签

  • [ ]内支持一定的表达式，如=、~=（包含）

• 新增伪类

  • :empty

    • 空标签，不含任何实际内容的（空白、换行视为有内容）

  • :root

    • 根元素标签

  • (表单)

    • :focus

      • 当前焦点

    • :enabled

      • 有效元素

    • :disabled

      • 无效元素（无法被选中表单元素）

    • :checked

      • 已勾选的单选/复选框

• 伪元素

  • 标签::before

    • 必须设置content属性

    • 在这个标签的内部

内容最前面会添加content对应的内容

• ::after

  • 同上

• ::selection

  • 对文本中选中的部分的

• ::first-letter

  • 块级元素第一个字母

• ::first-line

  • 块级元素第一行