NEWS
4大常用的選擇器,包括我們最頭痛的瀏覽器兼容性問題。掌握了它們,才能真正領略css的巨大靈活性。
廣州網站建設公司三行網絡今天為您剖析4大常用的css選擇器
1.
* {
margin: 0;
padding: 0;
}
星狀選擇符會在頁面上的每一個元素上起作用。web設計者經常用它將頁面中所有元素的margin和padding設置為0。
*選擇符也可以在子選擇器中使用。
#container * {
border: 1px solid black;
}
上面的代碼中會應用于id為container元素的所有子元素中。
除非必要,我不建議在頁面中過的的使用星狀選擇符,因為他的作用域太大,相當耗瀏覽器資源。
兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container {
width: 960px;
margin: auto;
}
井號作用域有相應id的元素。id是我們最常用的css選擇器之一。id選擇器的優(yōu)勢是精準,高優(yōu)先級(優(yōu)先級基數為100,遠高于class的10),作為javascript腳本鉤子的不二選擇,同樣缺點也很明顯優(yōu)先級過高,重用性差,所以在使用id選擇器前,我們最好問下自己,真的到了非用id選擇器的地步?
兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error {
color: red;
}
這是一個class(類)選擇器。class選擇器與id選擇器的不同是class選擇器能作用于期望樣式化的一組元素。
兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a {
text-decoration: none;
}
這也是我們最常用的一種選擇器——后代選擇器。用于選取X元素下子元素Y,要留意的點是,這種方式的選擇器將選取其下所有匹配的子元素,無視層級,所以有的情況是不宜使用的,比如上述的代碼去掉li下的所有a的下劃線,但li里面還有個ul,我不希望ul下的li的a去掉下劃線。使用此后代選擇器的時候要考慮是否希望某樣式對所有子孫元素都起作用。這種后代選擇器還有個作用,就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。
兼容瀏覽器:IE6+、Firefox、Chrome、Safari、Opera
本文由廣州網站建設公司-三行網絡原創(chuàng),轉載請保留版權( 廣州網站建設www.gongxing888.com )三行網絡——專注于企業(yè)網站建設、響應式營銷型網站定制,歡迎來電咨詢!熱線:020-85628720、15915767698
上一篇:網站界面設計、內容定位策略 下一篇:網絡營銷高招:如何占領客戶的心智