一、选择器
1、css主要有7中基本选择器
- ID选择器：#id
- 类选择器：.class
- 属性选择器：a[href="qqq.com"]
- 标签选择器：body
- 伪类选择器：:hover、:link、:active、:visited、:focus、:first-letter
- 伪元素选择器：::before
- 通配符选择器：*
2、css选择器优先级
important > 内联样式(style) > id > class=伪类=属性选择器 > 标签选择器=伪元素 > 通配符
3、其他选择器
|
element,element |
div,p |
选择所有<div>元素和<p>元素 |
|
element element |
div p |
选择<div>元素内的所有<p>元素 |
|
element>element |
div>p |
选择所有父级是 <div> 元素的 <p> 元素 |
|
element+element |
div+p |
选择所有紧接着<div>元素之后的<p>元素 |
|
element1~element2 |
p~ul |
选择p元素之后的每一个ul元素 |
二、可以继承的样式属性
当元素的一个继承属性(inherited property)没有指定值时，则取父元素的同属性的值。
1、字体属性：
| font | 组合字体 |
| font-family | 规定元素的字体系列 |
| font-weight | 设置字体的粗细 |
| font-size | 设置字体的尺寸 |
| font-style | 定义字体的风格 |
| font-variant | 偏大或偏小的字体 |
2.文本系列属性
| text-indent | 文本缩进 |
| text-align | 文本水平 |
| line-height | 行高 |
| word-spacing | 增加或减少单词间的空白 |
| letter-spacing | 增加或减少字符间的空白 |
| text-transform | 控制文本大小写 |
| direction | 规定文本的书写方向 |
| color | 文本颜色 |
3.表格布局属性
| caption-side | 定位表格标题位置 |
| border-collapse | 合并表格边框 |
| border-spacing | 设置相邻单元格的边框间的距离 |
| empty-cells | 单元格的边框的出现与消失 |
| table-layout | 表格的宽度由什么决定<automatic.fixed.inherit> |
4.列表布局属性
| list-style-type | 文字前面的小点样式 |
| list-style-position | 小点位置 |
| list-style | 以上的属性可通过这属性集合 |
5.引用
| quotes | 设置嵌套引用的引号类型 |
6.光标属性
| cursor | 箭头可以变成需要的形状 |
三、部分伪类
|
:first-of-type |
p:first-of-type |
选择每个p元素是其父级的第一个p元素 |
|
:last-of-type |
p:last-of-type |
选择每个p元素是其父级的最后一个p元素 |
|
:only-of-type |
p:only-of-type |
选择每个p元素是其父级的唯一p元素 |
|
:only-child |
p:only-child |
选择每个p元素是其父级的唯一子元素 |
|
:nth-child(n) |
p:nth-child(2) |
选择每个p元素是其父级的第二个子元素 |
|
:nth-last-child(n) |
p:nth-last- child(2) |
选择每个p元素的是其父级的第二个子元素，从最后 一个子项计数 |
|
:nth-of-type(n) |
p:nth-of-type(2) |
选择每个p元素是其父级的第二个p元素 |
|
:nth-last-of-type(n) |
p:nth-last-of- type(2) |
选择每个p元素的是其父级的第二个p元素，从最后 一个子项计数 |