css选择器

1、基本选择器

（1）元素选择器

书写格式：要修饰的标签{css属性}

 <style type="text/css">
        div{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利！！！</div>

（2）id选择器

书写格式：#id名{css属性}

 <style type="text/css">
        #d1{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利！！！</div>

（3）class选择器

书写格式：.class名{css属性}

 <style type="text/css">
        .c1{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利！！！</div>

**在上述基本类型的三种选择器中，优先级：id选择器>class选择器>元素选择器

2、元素选择器

书写格式：标签[选择的属性]{css属性}

 <style type="text/css">
       input[type="text"]{background-color:yellow}

 </style>

<form id="d1" action="">
        <input type="button" value="back"/>
        <input type="text"/> 
 </form>

3、伪元素选择器

伪元素选择器常用于修饰链接标签<a>。

书写格式：a:link{css的属性} 正常时链接的属性
                  a:hover{css的属性}鼠标箭头悬浮在上面时链接的属性
                  a:active{css的属性}鼠标点击链接时链接的属性
                  a:visited{css的属性}点击完成后链接的属性

 <style type="text/css">
       a:link{color:blue}
       a:hover{color:red}
       a:active{color:yellow}
       a:visited{color:green}

 </style>

<a href="http:/www.baidu.com" target="_blank">百度一下、你就知道</a>

4、层级选择器

书写格式：要选标签的父级标签 要选的标签{css属性}

 <style type="text/css">
      #d1 input[type="button"]{background-color:blue}
      form .text1{background-color:red}

 </style>

<form id="d1" action="">
        <input id="btn1" type="button" value="back">
        <input class="text1" type="text">
 </form>