1> ID选择器、交叉选择器、群组选择器、子代选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> p{ color: purple; font-size: 25px; } li{ font-size: 25px; line-height: 35px; } #two{ color: red; } /* .lanse{ color: blue; }*/ /*交叉选择器*/ li.lanse{ color:blue; } /*群组选择器*/ #test,.seven{ color: orange; } /*子代选择器*/ li span{ color: pink; } </style> </head> <body> <!-- 下面是html的写法 --> <font color='blue' size='3'>下面是html的写法</font> <font color='blue' size='3'>下面是html的写法</font> <font color='blue' size='3'>下面是html的写法</font> <font color='blue' size='3'>下面是html的写法</font> <font color='blue' size='3'>下面是html的写法</font> <font color='blue' size='3'>下面是html的写法</font> <!-- 下面是css的写法 --> <p>下面是css的写法</p> <p>下面是css的写法</p> <p>下面是css的写法</p> <p>下面是css的写法</p> <p>下面是css的写法</p> <span>我是ul外面的span标签</span> <ul> <li>我是第1行li标签 <span>我是ul里面的span标签</span></li> <li id="two">我是第2行li标签</li> <li class="lanse">我是第3行li标签</li> <li>我是第4行li标签</li> <li class="lanse">我是第5行li标签</li> <li id="test">我是第6行li标签</li> <li class="seven">我是第7行li标签</li> </ul> <p class="lanse">我是class为lanse的p标签</p> </body> </html>
2> 子选择器、相邻选择器、属性选择器、伪类选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*子选择器*/ /*#box>p{ color:red; }*/ /*相邻选择器*/ div+p{ color:blue; } /*属性选择器*/ p[name]{ color:red; } a{ font-size: 30px; color:blue; } /*伪类选择器*/ a:hover{ font-size: 50px; color: red; } #word{ width: 300px; border: 3px solid blue; margin: 0 auto; } p#word:first-letter{ font-size: 50px; color: red; } div[name]{ color: yellow; } </style> </head> <body> <div name="box">我是name为box的div元素</div> <p id="word">p标签p标签p标签p标签p标签p标签</p> <a href="http://www.baidu.com">百度</a> <br /> <br /> <br /> <div id="box"> <div id="son"> <p>我是son的p标签</p> </div> <p>我是box的p标签</p> <p name="test">我是box的p标签</p> <p>我是box的p标签</p> </div> </body> </html>
3> 选择器的优先级
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #box{ font-size: 30px; color: red; } h1{ font-size: 40px; color: orange; } /*有优先级*/ #title{ color: blue; } </style> </head> <body> <h1 id="title">今天是星期一</h1> <div id="box"> <p>我是box里面的p标签</p> <span>我是box里面的span标签</span> </div> </body> </html>