HTML学习笔记——选择器
生活随笔
收集整理的這篇文章主要介紹了
HTML学习笔记——选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>?
總結
以上是生活随笔為你收集整理的HTML学习笔记——选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js 1 声明变量 数据类型
- 下一篇： 一个css和js结合的下拉菜单，支持主流