CSS 選擇器

3、屬性選擇器
可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
註釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。

CSS 選擇器參考手冊

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute\|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

具體demo與語法參考：w3school

4、選擇器分組

w3school

5、包含選擇器（後代選擇器）

w3school

6、標籤指定式的選擇器

如果想同時使用id和class，也想同時使用標籤選擇符，可以使用如下的方式：

        /*表示所有id為idDemo的p標籤*/  
        p#idDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*表示所有class為classDemo的h1標籤*/  
        p.classDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*小注：標籤指定式的選擇符用#或者.來連線，中間不能有空格*/

效果如下：

測試程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />

    <style type="text/css">
        /** {
                            font-size: 12px;
                            line-height: 1.5;
                            color: blue;
                        }*/

        body {
            font-size: 12px;
            line-height: 1.5;
            color: blue;
        }
        /*
                    包含選擇符
                    對某物件中的子物件進行樣式指點定，這樣選擇方式就發揮了作用。
                需要注意的是，僅對此物件的子物件標籤有效，對於其它單獨存在或位於此物件以外的子物件，不應用此樣式設定。
                這樣做的優點在於，幫我們避免過多的id、class設定，直接對所需的元素進行定義。*/
        p strong {
            font-size: 36px;
            color: red;
        }
        /*注意下面這種*/
        #fi strong {
            font-size: 24px;
            color: brown;
             background: cadetblue;
        }

        /*群組選擇符

        對於XHMTL物件，可以對一組同時進行了相同的樣式指派。
        使用逗號對選擇符進行了分隔，這樣書寫的優點在於同樣的樣式只需要書寫一次即可，減少程式碼量，改善CSS程式碼結構。
        使用時應該注意”逗號”是在半形模式下，並非中文全形模式。*/

        h2, h3 {
            font-weight: normal;
        }

        /*表示所有id為idDemo的p標籤*/  
        p#idDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*表示所有class為classDemo的h1標籤*/  
        p.classDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*小注：標籤指定式的選擇符用#或者.來連線，中間不能有空格*/
    </style>

</head>
<body>

    <h1> 真正的才智是剛毅的志向。 —— 拿破崙</h1>
    <h2>
        感情有著極大的鼓舞力量，因此，它是一切道德行為的重要前提，誰要是沒有
        強烈的志向，也就不能夠熱烈地把這個志向體現於事業中。 —— 凱洛夫
    </h2>
    <div>勇敢堅毅真正之才智乃剛毅之志向。 —— 拿破崙</div>

    <p id="idDemo">
        生活賦予我們一種巨大的和無限高貴的<strong>禮品</strong>  ，這就是青春：充滿著力量，充滿著期待志願，充滿著求知和鬥爭的志向，充滿著希望信心和青春。 —— 奧斯特洛夫斯基
        <br />
        志向不過是記憶的奴隸，生氣勃勃地降生，但卻很難成長。 —— 莎士比亞
    </p>
    <p id="fi">人所缺乏的不是才幹而是<strong>志向</strong>，不是成功的能力而是勤勞的意志。 —— 部爾衛</p>

    <h3>
        當教師把每一個學生都理解為他是一個具有個人特點的、具有自己的志向、自己的智慧和性格結構的人的時候，這樣的理解才能有助於教師去熱愛兒童和尊重兒童。 —— 贊科夫
    </h3>

    <p class="classDemo">

        555555555555555555555555555555555555555555
    </p>
</body>
</html>

CSS 選擇器

CSS 選擇器參考手冊

相關文章