复合选择器

一、复合选择器
1)子选择器

1. 父标签>子标签：将样式应用于该父标签下的第一级所有直接子标签
2. 父标签>.class类名：将样式应用于该父标签下的第一级所有命名是该类名的子标签
3. 父标签＃id>.class类名：将样式应用于该id的父标签下的第一级所有该class类名的直接子标签(父标签和id之间无空格)

2)包含选择器/后代选择器

1. 父标签+空格+子标签: 将样式应用于该父标签包含的所有的该子标签，以及子标签包含的所有标签。同理，父标签可以用id或class代替，只要是在父标签中的，任何标签都可以作为子标签。可以包含很多层，但最好不要超过4层。

子选择器和父选择器区别：

    html
    HTML树状图


    
        content:
        1
    
    
        test
    
    3
    

        4
    

3)相邻选择器

1. A标签+A标签相邻的标签(下一个标签，不是上一个)：将样式应用于Ａ标签的相邻标签，Ａ标签本身不会应用该样式。下面代码中，如果讲兄弟选择器更换为相邻选择器，则只有
   HTML树状图
   ，会应用样式。

4)兄弟选择器

Ａ标签~B标签：指定Ａ元素后面的同级Ｂ标签，以及Ｂ标签包含的所有标签应用该样式。如下面代码，与h2同级的所有div均会应用该样式

HTML结构
HTML树状图

    HTML知识
oo

问君能有几多愁
问君能有几多愁

5)关于选择器嵌套

一层层的找，样式作用于最里面一层的标签,如：
#wrap #header h2 span{font-size: 24px; color: #55a532}，样式作用于最里面一层的span

6)Jquery属性选择器

1. 基础样式

div[attr]：匹配带有一个名为attr的属性的元素——方括号里的值。attr可以是style/class/id/其他各种属性的名字。注意，style设置的样式名不能作为attr。

2. 通过属性值来引用

通过属性值选择：div[attr＝"value"]，匹配带有一个名为attr的属性的元素，其值为value——引号中的字符串。

3. 按是否包含该属性值匹配

p[attr~="value1"]，匹配带有一个名为attr的属性的元素 ，其值正为value1，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value1匹配。注意，比如class="a b",[class_{="a"]是可以找到的，但class="ab"，[class}="a"]就找不到。

4.按是否以该属性值开头

div[attr|="value"]，匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。比如：div[lang|="zh"]。注意，比如class="ab",[class|="a"]是可以找到的，但class="a b",[class|="a"]就找不到。

7)字符串匹配选择器

1. 通过判断属性值是否包含该文本

第三个 div 元素。

2.通过判断属性值是否以该文本结尾

The first div element.
This is some text in a paragraph.

3.通过判断属性值是否以该文本开头

总结：

CSS选择器和CSS3在很多地方语言结构相似，CSS让项目更稳定，CSS3则支持更多渲染