一.复杂选择器

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.项目的属性

09-19 00:10