Web前端之CSS（5）—— 复杂选择器 CSS3

一.定位

1.定位的属性
position:
取值
static:默认值，静态---->默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
元素的position设置为relative/absolute/fixed中任意一个值
该元素被称为已定位元素

2.偏移属性
top/bottom/right/left
left:100px 往右移100px
top:-100px 往上移动100px

3.相对定位
元素相对于他原来的位置偏移某个距离
没有脱离默认文档流
页面上的不被其他元素补位
语法：position:relative;必须配合偏移属性使用
使用场合：
（1）位置微调
（2）经常作为absolute的最近的已定位的祖先元素

练习：
01_ex 用列表显示5张图片，做出照片墙效果
当鼠标悬停在图片上时，团票相对于自己的位置往左上方移动8px

4.绝对定位
绝对定位的元素会脱离默认文档流
绝对定位的元素会相对于离他的"最近的"“已定位的”"祖先元素"去实现定位
如果所有祖先元素不是已定位元素，相对于body去实现定位
属性：position:absolute；配合偏移属性使用
使用场合：有层叠的元素效果时，使用
绝对定位会让元素变为块级

5.固定定位
将元素固定在页面的某个位置
元素不会随滚动条发生位置变化，一直固定在可视区域内
语法：
position:fixed;配合偏移属性使用
注意：
（1）固定定位脱离文档流，不占页面空间
（2）固定定位元素变为块级元素
（3）相对于body实现位置的偏移初始化

6.堆叠顺序
元素变为已定位元素，有可能出现堆叠
默认堆叠顺序，后出现的已定位，堆叠顺序高
想修改堆叠顺序
z-index
无单位的数字，数字越大，元素越靠上显示
父子元素间，z-index无效，永远都是子元素压在父元素上面
只有已定位元素才能使用z-index

二.css3 core 核心

1.复杂选择器
（1）兄弟选择器
具备相同父级元素的平级元素之间称为兄弟元素
注意：兄弟选择器，只能往后，不能往前找
1° 相邻兄弟选择器，获取紧紧挨着某元素后面的兄弟元素

  选择器1+选择器2{}

2° 用兄弟选择器，获取某元素后面所有满足条件的兄弟元素

  选择器1~选择器{}

练习：
通过兄弟选择器设置如下样式
1.h3和div之间间距30px
2.从第二个div开始，每个div之间间距10px

2.属性选择器

   id class name type value style title....

允许通过元素所附带的属性及其值来匹配页面元素
基本语法
[attr]{} attr表示任意属性
可以匹配页面中所有附带attr属性的元素

elem[attr]{} elem[attr1][attr2]....{}
匹配页面中所有附带attr属性的elem元素

[attr=value]
匹配attr属性为value的元素

elem[attr=value]
匹配attr属性为value的elem元素

`[attr^=value]` 匹配属性值以value开头的元素
`[attr$=value]` 匹配属性值以value结尾的元素
`[attr*=value]` 匹配属性值中含有value的元素
`[attr~=value]` 匹配属性值中含有指定的单词的元素

3.伪类选择器

:link :visited :hove :active :focus

（1）目标伪类（锚点）
突出显示活动的HTML锚点元素，匹配被激活的锚点元素

 elem:target{}

（2）结构伪类
1° ：first-child
匹配的是该元素的父元素的第一个孩子----子元素的大哥
2° ：last-child
匹配的是该元素的父元素的最后一个孩子----子元素的小弟
3° ：nth-child(n)
匹配的是该元素的父元素的第n个孩子 n从1开始

练习：
09_ex 创建4行4列的表格，内容随意
通过结构伪类设置样式
第一行背景颜色为蓝色
最后一行背景颜色为黄色
第三行的第二列背景颜色为红色，字体大小为28px；

4° ：empty 匹配没有子元素的元素
回车，空格，文本都不能写，才算没有子元素
5° ：only-child 匹配的元素是父元素中唯一的子元素
6° ：not 否定伪类，将满足指定选择器的元素，排除在外
：not(selector){}

4.伪元素选择器
:first-letter{}或者::first-letter{ }
匹配修改第一个字符的样式

:first-line或者::first-line{ }
匹配修改第一行字符的样式

::selection{}
匹配修改选中文本的样式—只支持字体颜色和背景颜色

练习:
10_ex
添加一个div#d1 内容随意，
首字符设置为加粗，红色，20px
右外边距10px,首行文本橙色并倾斜
用户选中的文本，字体颜色黄色，背景红色
内容生成
使用css动态的向某元素中插入一段"内容"