CSS复合选择器

CSS复合选择器

1、子选择器

作用：子元素选择器只能选择作为某元素子元素的元素。

格式：父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法：.father>son{background:black}

2、相邻选择器

概念：相邻选择器又称为兄弟选择器。
作用：相邻选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

 格式：1.类名1 + 类名2{ }    只能选中类名2
       2.类名1 ~ div {  }  除了类名1不会选中，他所有兄弟类都会被选中。
 语法：1、.a + div{background: black;}
      2、.a ~ div{background:black;}

3、包含选择器

概念：包含选择器又称为后代选择器。
作用：用来选择元素或元素组的子元素。

格式：外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父元素，再写子元素.
语法：.father son{background:black}

5、属性选择器

attr:任意属性名称 elem : 表示任意元素 value:值
1、~=：
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值
2、^= 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
3、$= 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
4、*= : 包含 value 字符

6、伪选择器

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类似，但是其是预定义的、不存在于文档树中。

属性：:first-child ，:link:，:vistited，:hover:，:active，:focus，:lang
语法：：为伪类选择器

7、伪元素选择器

伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素。

属性：:first-line，:first-letter，:before，:after 
语法：::为伪元素选择器