css选择器

1. 伪类选择器
   根据链接的当前状态进行格式选择

a:link{/*未指向或激活*/
    color: red;
}
a:visited{/*激活过*/
    color: orange;
}
a:focus{/*键盘选择，准备激活*/
    color: black;   
}
a:hover{/*正被指向*/
    color: green;
}
a:active{/*激活即点击时*/
    color: blue;
}

<h3>伪类选择器</h3>
    <a href="http:\\www.google.com">google</a>
    <a href="http:\\www.netease.com">netease</a>
    <a href="http:\\www.sohu.com">sohu</a>
    <p>
        伪类选择器通常作用于a标签，可以根据链接的状态进行格式选择
        <br>
        链接的样式应该始终按照这种顺序定义，以避免其处于多种状态
    </p>

1. 按上下文选择

div a{
    color: yellow;/*祖先 子孙*/
}
div >p{
    color: red;/*父子*/
}
div >p:first-child/*nth-child(m)第m个孩子*/{
    text-decoration: none;
}
div a+p{/*直接出现在a后边的p*/
    color: green;
}

<h3>上下文选择</h3>
    <div id="parent">
        <a href="www.child1.com">child1</a>
        <p>child2</p>
        <p>child3</p>
        <p>child4</p>
    </div>