網頁

▼

2019/7/27

CSS Universal selector 全體選擇器

本篇介紹CSS selectors的Universal selector（全體選擇器）的用法。

Universal selector以星號(asterisk)*表示，代表選擇HTML文件的所有元素。

例如下面範例在<style>...</style>中（即內部樣式表(Internal style sheet)）以universal selector選取全部的元素來套用CSS樣式，把所有元素的文字變成紅色(color:red)。

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
           color:red; 
        }
    </style>
</head>

<body>

    <div>
        <h1>區塊一標題</h1>
        <p>區塊一段落文字</p>
    </div>

    <div>
        <h1>區塊二標題</h1>
        <p>區塊二段落文字</p>
    </div>

</body>
</html>


Universal selector通常的使用時機為希望文件中全部元素都有同樣的CSS效果，例如所有文字預設都是灰色；或是有一致的字型(font-family)；或是有一致的內外邊距(margin，padding)等。


參考：

沒有留言:

張貼留言