css之选择器

css对html页面进行修饰，需要找到，方式如下

-基本选择器
        元素选择器：
            语法：html标签名{css属性}
            <style type="text/css">
                div{color:blue;font-size:888px}
            </style>
            
        id选择器：  id具有唯一性
            语法：#id的值{css属性}
            <style type="text/css">
                #d1{background-color: blue;}
                #d2{background-color: red;}
            </style>    
            <div id="d1">div1</div>
            <div id="d2">div2</div>
            
        class选择器
            语法：.class的值{css属性}
            <style type="text/css">
                .c1{background-color: red}
                .c2{background-color: blue}
            </style>
            <div class="c1">div1</div>
            <div class="c1">div2</div>
            <div class="c2">div3</div>
            <div class="c2">div3</div>
            
            
        选择器的优先级：id选择器>类选择器>元素选择器

        
    -属性选择器：
        语法：基本选择器[属性=‘属性值’]{css属性}
        <style type="text/css">
            input[type='text']{background-color: red}
            input[type='password']{background-color: blue}
        </style>
        <form action="" method="post">
            账号：<input type="text" name="account"/><br/>
            密码：<input type="password" name="password"/><br/>
        </form>
        
    -伪元素选择器：表示一种状态
        a标签的伪元素选择器
        语法：
            静止状态   a:link{css属性}
            悬浮状态   a:hover{css属性}
            点击状态   a:active{css属性}
            完整状态   a:visited{css属性}
            
        <style type="text/css">
            a:LINK {color:red}
            a:HOVER {color:blue}
            a:ACTIVE {color:pink}
            a:VISITED {color:yellow}
        </style>
        <a href="#">点我！！！</a>
        
    -层级选择器：
        语法：父级选择器 子级选择器 .....
        <div id="d1">
            <div id="d11">
                <span>span11</span>
            </div>
            <div id="d12">
                <span>span12</span>
            </div>
        </div>
        <div id="d2">
            <div id="d11">
                <span>span21</span>
            </div>
            <div id="d12">
                <span>span22</span>
            </div>
        </div>
        
        <style type="text/css">
            #d1 #d12 span{color:red}
        </style>