1. 程式人生 > >CSS 選擇器

CSS 選擇器

ade popu type tle baseline 有著 tar name fcm

1、ID選擇

2、CLASS選

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 選擇器