1.根据元素属性来选择元素
例如:p[name]{ }
2.选择子元素
使用子结合符,>
3.选择相邻兄弟元素
相邻兄弟结合符+
注:用一个结合符只能选择两个相邻兄弟中的第二个元素 如果写作li+li{ },只会对各列表项中的第二个和第三个列表项起作用,第一个列表项将不受影响
4.伪类选择器
链接伪类 :link 指示作为超链接
:visited 指示作为已访问地址超链接的所有锚
动态伪类:focus 获取输入焦点
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户输入激活的元素
伪类的顺序 link-visited-hover-active
注:Windows平台的Internet Explorer在IE6之前只允许动态伪类选择超链接,而不允许选择其他元素。IE7支持对所有元素都能应用:hover,但是不支持对表单元素应用:focus样式
选择第一个子元素 :first-child
注:Windows平台的Internet Explorer在IE6之前不支持:first-child,不过IE7支持
设置之前和之后元素的样式 :before :after
5.文本
(1)缩进文本text-indent 继承
(2)水平对齐 text-align
(3)垂直对齐 line-height
(4)垂直对齐文本 vertical-align 适用于行内元素和表单元格
(5)文本修饰text-decoration underline//下划线
(6)文本阴影 text-shadow
6.边距
正常流中一个块元素的margin-top或margin-bottom设置为auto,他会自动计算为0.说明,如果将一个元素的上、下边距设置为auto,实际上他们都会重置为0,是元素没有外边距。
7.display
run-in元素 块/行内元素混合,可以使某些块级元素成为下一个元素的行内部分。
注:只有当run-in框后面是一个块级框时run-in才起作用,如果不是,run-in框本身将成为块级框
8.盒子模型
IE width=元素内容区+左右外边距+左右边框
标准盒模型 width=元素内容+左右内边距+左右外边距+左右边框
9.背景图
背景图不受滚动的影响 background-attachment可以声明原图像相对于可视区是固定的(fixed)
原图像的放置由可视区的大小确定
10.浮动和定位
定位:position 值:static 正常文档流
relative 元素框偏离某个距离,元素仍保持其未定位前的形状,原本空间仍保留
absolute 元素框从文档流完全删除,并相对于其包含块定位。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框
fixed 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身
inherit