一天搞定CSS：css选择器--07
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：css选择器--07
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
選擇器：是指選擇標簽的方法
1.選擇器類型
2.id選擇器
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>#box{width: 100px;height: 100px;background: red;}#box1{width: 200px;height: 200px;background: green;}</style></head><body><!--id選擇器 能過id選擇元素（選擇到的是一個元素）語法 #id名稱{要添加的樣式}注意：id具有唯一性，一個頁面當中只能出現一個同樣的id--><div id="box"></div><div id="box1"></div></body> </html>3.標簽選擇器
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: green;margin-top: 50px;}</style></head><body><!--標簽選擇器 通過標簽名字選擇元素（選擇到的是一組元素）語法 標簽名{要添加的樣式}注意：標簽選擇器會給所有的標簽都添加上相同的樣式，會影響其它的標簽--><div></div><div></div><div></div></body> </html>4.class選擇器
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.box{width: 100px;height: 100px;background: green;margin-top: 50px;}.border{border: 10px solid #000;width: 200px;}</style></head><body><!--類選擇器 通過class選擇元素（選擇到的是一組元素）語法 .class名稱{要添加的樣式}注意：頁面中的class是可以重名的一個元素的class可以有多個，每個class之間用空格隔開，如果后面class里的樣式與前面的有重復的，那后面的會把前面的覆蓋了--><div class="box"></div><p class="box border"></p><section class="box border"></section></body> </html>5.群組選擇器
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div,p,section,#title1,#title2,.head{width: 100px;height: 100px;background: red;}</style></head><body><!--群組選擇器 能過逗號的方式選擇元素（選擇到的是一組元素）語法 標簽名,標簽名{要添加的樣式}#id名稱,#id名稱{要添加的樣式}.class名稱,.class名稱{要添加的樣式}標簽名,#id名,.class名稱{要添加的樣式}只要任意一個元素有相同的樣式，那都可以用群組選擇器放在一起，不過要用逗號隔開。不管他是id選擇器、class選擇器、標簽選擇器都可以--><div></div><p></p><section></section><h1 id="title1"></h1><h2 id="title2"></h2><header class="head"></header></body> </html>6.包含選擇器
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>/*div div{width: 100px;height: 100px;background: green;}*//*.wrap div{width: 100px;height: 100px;background: green;}*/.wrap #div2{width: 100px;height: 100px;background: green;}</style></head><body><!--包含選擇器 通過范圍選擇元素（選擇到的可能是一個元素也可能是多個元素）語法 父級 目標元素{要添加的樣式}父級與目標元素都可以是用任意一種選擇器選擇到的元素--><div class="wrap">div1<div id="div2">div2</div></div></body> </html>7.通配符（*）
通配符（*）——->獲取頁面所有的元素
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>*{height: 50px;border: 1px solid #f00;margin: 10px;}</style></head><body><!--* 通配符用來獲取到頁面中的所有元素--><div>div</div><p>p</p><h1>h1</h1><h2></h2></body> </html>8.選擇器優先級
地址：http://blog.csdn.net/baidu_37107022/article/details/71440766
總結
以上是生活随笔為你收集整理的一天搞定CSS：css选择器--07的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定HTML----标签语义化04
- 下一篇： 一天搞定CSS： CSS选择器优先级-