您好,登錄后才能下訂單哦!
小編給大家分享一下CSS中如何依據(jù)元素的上下文關(guān)系來定義樣式,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
CSS id 選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。
實例
#red {color:red;} #green {color:green;}
注釋:上面的兩個 id 選擇器,第一個定義元素的顏色為紅色,第二個定義元素的顏色為綠色。
<p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p>
注釋:id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。
提示:id 屬性只能在每個 HTML 文檔中出現(xiàn)一次,是唯一標(biāo)示符(如:JS獲取頁面元素)。
id 選擇器和派生選擇器
在現(xiàn)代布局中,id 選擇器常常用于建立派生選擇器。
被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次,但這個 id 選擇器作為派生選擇器可以被多次使用。
實例
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h3 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
提示:id 是 sidebar 的元素內(nèi)的 p 元素和 h3 元素都得到了特殊處理。
單獨的選擇器
id 選擇器即使不被用來創(chuàng)建派生選擇器,它也可以獨立發(fā)揮作用:
#sidebar { border: 1px dotted #000; padding: 10px; }
提示:id 為 sidebar 的元素將擁有 1px 的黑色點狀邊框和 10px 的內(nèi)邊距(padding,內(nèi)部空白)。
注意:老版本的 Windows/IE 瀏覽器可能會忽略這條規(guī)則,除非你特別地定義這個選擇器所屬的元素:
div#sidebar { border: 1px dotted #000; padding: 10px; }
看完了這篇文章,相信你對“CSS中如何依據(jù)元素的上下文關(guān)系來定義樣式”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。