(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>