一.复杂选择器
1.兄弟选择器 具备相同父级元素的平级元素之间称为兄弟元素 注意:兄弟选择器,只能往后,不能往前找
(1).相邻兄弟选择器,获取紧紧挨着某元素后面的兄弟元素 选择器1+选择器2{}
(2).通用兄弟选择器,获取某元素后面所有满足条件的兄弟元素 选择器1~选择器{}
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).结构伪类
:first-child 匹配的是该元素的父元素的第一个孩子----子元素的大哥
:last-child 匹配的是该元素的父元素的最后一个孩子----子元素的小弟
:nth-child(n) 匹配的是该元素的父元素的第n个孩子 n从1开始
:empty 匹配没有子元素的元素 回车,空格,文本都不能写,才算没有子元素
:only-child 匹配的元素是父元素中唯一的子元素
:not 否定伪类,将满足指定选择器的元素,排除在外 :not(selector){}
4.伪元素选择器
:first-letter{}或者::first-letter{ } 匹配修改第一个字符的样式
:first-line或者::first-line{ } 匹配修改第一行字符的样式
::selection{} 匹配修改选中文本的样式---只支持字体颜色和背景颜色
5.伪类选择器
二.弹性布局
1.什么是弹性布局
2.弹性布局的相关概念
3.语法
4.容器的属性
5.项目的属性