網頁

▼

2019/7/27

CSS Type selector 元素選擇器

本篇介紹CSS selectors的Type selector（元素選擇器）的用法。

Type selector使用HTML元素名稱來選取指定的HTML元素。

例如下面範例在<style>...</style>中（即內部樣式表(Internal style sheet)）以type selector選擇的要套用CSS樣式的HTML元素為<div>，<h1>，<p>。

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: pink;
        }
        h1 {
            background-color: orange
        }
        p {
            background-color: yellow;
        }
    </style>
</head>

<body>

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

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

</body>
</html>

在瀏覽器打開如下。



注意type selector所選的HTML元素為該HTML文件中所有符合的HTML元素。例如上例中不論是區塊一還是區塊二的<div>底色都是粉紅色(pink)。


參考：

沒有留言:

張貼留言