CSS*通用選擇器的寫法


CSS*通用選擇器的寫法:通用選擇器以英文小寫符號*定義,可以選擇頁面上所有的 HTML 元素,也就是說頁面上的每個元素都會受到樣式的影響,舉例如下:

*{text-align: center;color: blue;}

范如樂這段代碼設置了兩個聲明,第一個聲明的樣式:屬性為text-align(水平對齊方式),對應的值center(居中);第二個聲明的樣式:屬性為color(顏色),對應的值blue(藍色)。

為了對比CSS*通用選擇器對id選擇器和類選擇的影響效果,范如樂給一段p元素設置了id=”hongse”,給另一端p元素設置了class=”lvse”,效果如圖:

CSS*通用選擇器效果圖示

從截圖可以看到,當前html文檔中的h1和p元素都受到了CSS*通用選擇器的影響而居中了,但是第一段<p id=”hongse”>還是顯示紅色,第二段<p class=”lvse”>還是顯示綠色,而h1則變成藍色。

CSS*通用選擇器指定元素寫法:

CSS*通用選擇器除了可以選取所有元素,也能指定選取另一個元素中的所有元素,寫法也很簡單,只需要在*前面添加該元素命即可,舉例如下:

div *{background-color:yellow;}

范如樂這段代碼指定了div元素內的所有元素,然后設置了這樣的樣式:屬性為background-color(背景顏色),對應的值yellow(黃色),效果如圖:

css * 通用選擇器指定選取另一個元素中的所有元素效果圖示

從截圖可以看到,div元素的區域都變成了黃色背景,而div區域外的其它元素不受影響,也不會變成黃色背景。

而且為了實際的應用效果,范如樂還給div設置了<div class=”lvse”>,給div里面的一個p設置了<p id=”hongse”>。

從截圖可以看到,<p id=”hongse”>為紅色的段落不會顯示為綠色,依然顯示紅色,而<p>因為受到<div class=”lvse”>的影響變成了綠色。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/7971.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: