天天看點

html五種css選擇器,五種你必須徹底了解的CSS選擇器

CSS選擇器是進行CSS網頁布局的基礎,這些選擇器合理的應用,将有效的提高你的開發效率和編碼水準。我們在大前端有過大量的文章進行介紹,下面的這五種CSS選擇器,是基礎中的基礎,大家一起溫習一下。

一、*(通配符選擇器)

*通配符選擇器,經常用于css reset,即樣式重置,清理标簽的預設樣式,但現在一般不提倡直接使用*了,主要是*會比對所有标簽,相當耗資源。*在css的優先級中是最低的。

* {

margin: 0;

padding: 0;

}

也可以用*來比對某一進制素下的所有子元素:

#container * {

border: 1px solid black;

}

二、#X (ID選擇器)

#+id名,這是日常常用的css選擇器,用于比對id為XXX的元素,id選擇器的優勢是精準,高優先級(優先級基數為100,遠高于class的 10),作為javascript腳本鈎子的不二選擇,同樣缺點也很明顯優先級過高,重用性差,是以在使用id選擇器前,我們最好問下自己,真的到了非用 id選擇器的地步?

#container {

width: 960px;

margin: auto;

}

三、.X (類選擇器)

.+class名,标準的樣式選擇器,與id選擇器的差別是樣式選擇器可以選擇多個元素。樣式選擇器是提倡使用的選擇器,我想也是日常前端人員用到最多的選擇器了。

.error {

color: red;

}

四、X Y (後代選擇器)

li a {

text-decoration: none;

}

目前非常常用的css選擇器,用于選取X元素下子元素Y,這裡有個要留意的點是,這種方式的選擇器将選取其下所有比對的子元素,無視層級,是以有的情況 是不宜使用的,比如上述的代碼去掉li下的所有a的下劃線,但li裡面還有個ul,我不希望ul下的li的a去掉下劃線。

使用此子孫選擇器的時候要考慮是否希望某樣式對所有子孫元素都起作用。

這種子孫選擇器還有個作用,就是建立類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。

五、X (标簽選擇器)

a { color: red; }

ul { margin-left: 0; }

标簽選擇器,優先級僅僅比*高,常用于css reset。

未完待續,請關注大前端下一篇文章,我們向大家介紹别的CSS選擇器