第二章：选择器

一、元素选择器

h1 {
    color: red;
}

选择器组合(用逗号隔开，否则就是后代选择器了)

h1, h2, h3 {
    color: red;
}

二、通配选择器

* {
    color: red;
}

三、类选择器 ID选择器

独立于文档元素的方式来指定样式

1.类选择器

    <div class="className"></div>

    .className {
        color: red;
    }

2.多类选择器

    <div class="className1">1</div> /* red*/
    <div class="className2">2</div>/* red*/
    <div class="className1 className2">3</div>/* yellow*/

.className1 {
    color: red;
}
.className2 {
    color: green;
}
.className1.className2  {
    color: yellow;
}

3.ID选择器

    <div id="id1">1</div>
    <div id="id2">2</div>

    #id1 {
        color: blue;
    }
    #id2 {
        color: purple;
    }

4.类选择器和ID选择器区别
    ID选择器会使用一次，而且仅一次，如果一个元素的id为“xxx”,那么该文档的其他元素的id都不能是“xxx”；ID选择器不能结合使用,因为ID属性不允许以空格分隔词列表；如果你想确定应当向一个给定元素应用哪些元素时,ID可能包含更多含义。

五、属性选择器

    <div property="I am jax">jax</div>
    <div property="you are wrong">wrong</div>

    /*简单属性值选择*/
    div[property] {
        color: red;
    }
    /*具体属性值选择*/
    div[property="I am jax"] {
        color: green;
    }
    div[property="you are wrong"] {
        color: purple;
    }
    /*根据部分属性值选择*/
    /* ~= 只能是具体值中的某个词 比如you、are、wrong。 但是you a、you 、不行 */
    /* ^= 以wrong开头 */
    /* $= 以wrong结尾 */
    /* *= 包含wrong就行*/
    div[property~="wrong"] {
        color: blue;
    }

六、后代选择器

子元素、父元素  
父子关系、祖先-后代关系
1.后代选择器
ancestorSelector空格descendantsSelector {
    选择块；
}  
ancestorSelector的所有后代选择器descendantsSelector都被选中

2.选择子元素
fatherSelector > sonSelector {
    选择块；
}
fatherSelector的所有子选择器sonSelector都被选中

七、选择相邻兄弟

selector1 + selector2 {
    选择块；
}
selector1的兄弟选择器selector2被选中

八、伪类选择器

/*根据语言选择*/
*:lang(fr) {
    font-style: italic;
}
/*********** 静态伪类 **********/

/* 指向一个未访问地址的所有锚 */
a.cxw:link {
    color: purple;
}
/*指示已访问地址超链接的所有锚*/
a.cxw:visited {
    color: red;
}

/*********** 动态伪类 **********/

/*指示当前拥有输如焦点的元素*/
a.cxw:focus {
    color: black;
    background-color: white;
}
/*指示鼠标指针停留在那个元素上*/
a.cxw:hover {
    color: white;
    background-color: red;
    font-size: 30px;
}
/*指示被用户输入激活的元素*/
a.cxw:active {

}

/*********** 伪元素选择器 **********/

/*设置首字母样式*/
p:first-letter {
    font-size: 200%;
    color: red;
}
/*设置第一行的样式*/
p:first-line {
    color: purple;
}

/*********** first-child **********/

/*选择第一个子元素*/
p:first-child {
    
}