CSS基础知识（三）

文本

text-color

还是最常见的四种颜色取法

text-align

内容对齐方式
属性值

• left
• right
• center
  块级元素会作用于整行

text-decoration

指文字有无修饰,默认值为none
属性值：

• underline 下划线
• overline 上划线
• line-through 贯穿线，类似于删除标签

text-transform

• 默认值none 无转换
• capitalize 每个单词首字母大写
• uppercase 全部转为大写
• lowercase 转换成小写

text-indent

文本第一行缩进
1em和当前字体大小相等

word-wrap

设置当前行超过指定容器边界时是否换行
默认值normal
break-word 换行

vertical-align

垂直对齐方式，容器中元素相对于内容的位置

line-height

行高

• normal 默认合理设置行间距
• number 设置数字，数字与字体尺寸相乘设置行间距
• length 设置固定行间距

列表

list-style-image

设置列表标记的图像(项目符号)

list-style-position

• outside 项目符号放在文本以外
• inside 项目符号在文本内

list-style-type

1. none 不使用项目符号
2. disc 实心圆
3. circle 空心圆
4. square 实心方块

list-style(复合属性)

list-style：list-style-image list-style-position list-style-type
可以更换顺序

选择器扩增

合并选择器

选择器一，选择器二，选择器三{}
选择器一二三都被选中

关系选择器（派生选择器）

后代选择器

E F{}
选择所有被E包围的F元素（空格隔开）

子代选择器

E>F
选择所有作为E元素的直接子元素F

相邻兄弟选择器

E+F
选择E相邻的下一个F元素

通用兄弟选择器

E~F
选择E后的所有兄弟F元素

属性选择器

E[att]
选择具有attr属性的E元素
E[att~=“val”]选择有att属性，且属性值列表中有一个符合val的元素
E[att~=“val”]选择属性值包含val的元素
E[att^=“val“]选择属性值以val开头的属性，val 为完整的单词或单词的一部分
E[att$=“val”]选择属性值以val结尾的属性，val 为完整的单词或单词的一部分
E[att|=“val”]值是用连字符”-"分隔的单词，并以 val 开头的E元素
E[att*=“val”]值包含 val 子字符串的E元素

伪类选择器

伪类通过冒号定义，定义了元素的状态，比如点击点击完。
可以为元素的状态改变样式，使元素看上去更动态

1. E:link
   在超链接未被访问的样式（特指a标签）
2. E:visited
   在超链接已经被访问的样式（特指a标签）
3. E:hover
   设置鼠标在元素悬停上的样式
4. E:active
   设置鼠标在按下去时的样式
5. E:not()
6. E:first-child
7. E:last-child
8. E:only-child
9. E:empty
10. E:checked
11. E:nth-child()

伪对象选择器

伪对象也叫伪元素
伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性；
伪元素表示DOM外部的某种文档结构（html控制结构）
伪元素改变文档结构，在结构外另加一个没有实际存在的元素（伪元素）

• E::before(after) 在备选元素的内容前(后)面插入内容，用来和content属性一起使用

选择器优先级

1.css选择规则的权值不同时，权值高的优先；

2.css选择规则的权值相同时，后定义的规则优先；

3.css属性后面加 !important 时，无条件绝对优先；

权重

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。