css 常用选择器

*{} 选定所有对象,会遍历并命中文档中所有的元素。全局样式。
:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

css关系选择器：

E F{} 选择所有被E元素包含的F元素。选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…
E>F{} 选择E元素里面的子元素F，与前者 E F{}不同的是，子选择符只能命中子元素，不能选中孙辈,如下示例：

.demo > div {
    position: relative;
}

<div class="demo">
    <div class="a">
        <div class="b">子选择符</div>
    </div>
</div>

//此时只有 .a 被选中 ，因为它是 .demo 的子元素

E+F{}, 选择紧贴在E元素之后F元素 (E元素之后的第一个F元素)，元素E与F必须同属一个父级。
E~F{},选择E元素后面的所有兄弟元素F (会命中所有符合条件的兄弟元素)，元素E与F必须同属一个父级。
注：选择的只是同级的元素F，后代中的元素F不会被选择。只作用于同级元素

• (E+F)与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，(E+F)只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。

  css属性选择器

  E[att]{} 选择具有att属性的E元素。
  E[att=”val”]{} 选择具有att属性且属性值等于val的E元素。
  E[att~=”val”]{} 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况），例：

  <style>
    div[class~="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a b">3</div>
    //将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

E[att^=”val”] {} 选择具有att属性且属性值为以val开头的字符串的E元素。

<style>
div[class^="a"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
//，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

E[att$=”val”] {} 选择具有att属性且属性值为以val结尾的字符串的E元素。

<style>
div[class$="c"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
//将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

E[att*=”val”] {} 选择具有att属性且属性值为包含val的字符串的E元素。

<style>
div[class*="b"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
//将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

E[att|=”val”] {} 果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。

<style>
div[class|="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">0</div>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>
//在这个例子中，前2个div将会被命中：
//第1个div，拥有class属性，并且值为a，所以被命中；
//第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；

css伪类选择器：

:first-child 匹配父元素的第一个子元素。
:last-child 匹配父元素最后一个子元素
E:only-child 匹配父元素仅有的一个子元素el。
E:nth-of-type(n) 匹配同类型的第n个同级元素E。
:nth-child(n) 用于定位某个父元素的一个或者多个特定的子元素，“n” 是参数， 可以是整数，也可以是表达式（2n+1）(-n+3) 索引值从1开始，，也可是关键词（odd）（even）;

注：当“:nth-child(n)”中的n为表达式时，n从0开始计算，当表达式的值为0或者小于0时，选择器选择不到任何相匹配的元素。如下表所示：