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
- 块级元素第一行