補充了一些之前遺漏掉的選擇器以及一些在 Selectors Level 4 中新定義的選擇器。 屬性選擇器不區分大小寫 [attribute="value" i],在 Selectors Level 4 中增強了屬性選擇器,添加一個 i 標識,讓屬性大小寫不再敏感,例如 a[href ...
CSS 選擇器除了樣式表匹配元素時需要用到,在使用 jQuery 等庫的時候也可以利用 CSS 選擇器來選擇元素,因此作為前端開發需要熟練掌握。下面是一些常用的 CSS 選擇器示例。 元素選擇器 E,選擇所有指定元素名稱的元素,例如 p,選擇所有的 p 元素。 通用選擇器 ,選擇所有元素,例如: 類選擇器 .class,用一個點號加類名表示,例如 .header,選擇所有 class 屬性中包含 ...
2016-05-02 14:20 4 1940 推薦指數:
補充了一些之前遺漏掉的選擇器以及一些在 Selectors Level 4 中新定義的選擇器。 屬性選擇器不區分大小寫 [attribute="value" i],在 Selectors Level 4 中增強了屬性選擇器,添加一個 i 標識,讓屬性大小寫不再敏感,例如 a[href ...
前面的話 CSS的一個核心特性是能向文檔中的一組元素類型應用某些規則,本文將詳細介紹CSS選擇器 [注意]關於選擇器兼容性的詳細信息移步至此 通配選擇器 星號*代表通配選擇器,可以與任何元素匹配 元素選擇器 文檔的元素是最基本的選擇器 ...
選擇器的用處就是告知瀏覽器,我這一大堆的樣式要用在哪些元素 選擇器很重要,學好了,可以減少很多CSS代碼,不用像以前一樣,一大堆類選擇器。 以下為了方便查看CSS代碼,我采用內聯樣式的方法,但在實際開發中,建議用外聯樣式,這有利於頁面的性能優化。 id選擇器 id選擇器,要在標簽添加id ...
一、基本選擇器 1. * 通用元素選擇器,匹配任何元素 2. E 標簽選擇器,匹配所有使用E標簽的元素 3. .info class選擇器,匹配所有class屬性中包含info的元素 4. #footer id選擇器,匹配所有id屬性等於footer的元素 二、多元素的組合選擇器 ...
1.>(子選擇器) #a>p{ // 使用 > 號,讓選擇器選擇id="a"的所有子類(直接子類) 結果: 2.+(相鄰選擇器) h1+p,選擇緊接在另一個元素后的元素,而且二者有相同的父元素。只會選擇第一個相鄰的匹配元素 ...
1、標簽選擇器 2、類選擇器 3、id選擇器 4、通配符選擇器(*) 5、連接類偽類選擇器(a:hover) 6、結構偽類選擇器(first-child(),last-child(),nth-child(),nth-last-child()) 7、目標偽類選擇器(:target 被選 ...
1. id選擇器(#myid) 根據id的值選擇元素 2. 類選擇器(.myclassname) 根據class的值選擇元素 3. 標簽選擇器(div,h1,p) 根據標簽選擇元素 4.相鄰選擇器/兄弟選擇器(h1+p) 匹配緊跟第一個選擇器,並且匹配第二個選擇器內的元素,如緊跟h1元素后 ...
一、后代選擇器 選取指定元素的后代元素 與子元素選擇器相比,后代選擇器選取的不一定是直接后代(兒子),而是作用於所有后代元素(兒子、孫子、重孫…)都可以。 實例:(選取類為 box的元素的 id為aa后代元素) HTML CSS 二、(> ...