您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“CSS決議器怎么用”,內容詳細,步驟清晰,細節處理妥當,希望這篇“CSS決議器怎么用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
"CSS" 列指示該屬性是在哪個 CSS 版本中定義的。(CSS1、CSS2 照樣 CSS3。)
決議器 | 例子 | 例子描畫 | CSS |
---|---|---|---|
.class | .intro | 抉擇 class="intro" 的所有元素。 | 1 |
#id | #firstname | 抉擇 id="firstname" 的一切元素。 | 1 |
* | * | 決意所有元素。 | 2 |
element | p | 選擇全部 <p> 元素。 | 1 |
element,element | div,p | 決定悉數 <div> 元素與所有 <p> 元素。 | 1 |
element element | div p | 抉擇 <div> 元素外部的一切 <p> 元素。 | 1 |
element 決意器" href="https://www.w3school.com.cn/cssref/sele首席技術官r_element_gt.asp">element>element | div>p | 抉擇父元素為 <div> 元素的悉數 <p> 元素。 | 2 |
element+element | div+p | 決意緊接在 <div> 元素以后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 抉擇帶有 target 屬性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 決定 target="_blank" 的全體元素。 | 2 |
[attribute~=value] | [title~=flower] | 決議 title 屬性包孕單詞 "flower" 的全部元素。 | 2 |
[attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 "en" 最初的所有元素。 | 2 |
:link | a:link | 決定全數未被走訪的鏈接。 | 1 |
:visited | a:visited | 選擇全數已被會見的鏈接。 | 1 |
:active | a:active | 選擇勾當鏈接。 | 1 |
:hover | a:hover | 選擇鼠標指針位于其上的鏈接。 | 1 |
:focus | input:focus | 選擇失掉外圍的 input 元素。 | 2 |
:first-letter | p:first-letter | 決定每一個 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 抉擇每一個 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 選擇屬于父元素的第一個子元素的每個 <p> 元素。 | 2 |
:before | p:before | 在每個 <p> 元素的形式疇前插入形式。 | 2 |
:after | p:after | 在每一個 <p> 元素的模式以后插入模式。 | 2 |
:lang(language) | p:lang(it) | 抉擇帶有以 "it" 開首的 lang 屬性值的每一個 <p> 元素。 | 2 |
element1~element2 | p~ul | 決定后背有 <p> 元素的每一個 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 決意其 src 屬性值以 "https" 開頭的每一個 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 抉擇其 src 屬性以 ".pdf" 末了的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 決議其 src 屬性中包孕 "abc" 子串的每個 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 抉擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 | 3 |
:only-child | p:only-child | 抉擇屬于其父元素的僅有子元素的每個 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 決定屬于其父元素的第二個子元素的每一個 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,從最后一個子元素劈頭劈臉計數。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 抉擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是從最后一個子元素劈頭劈臉計數。 | 3 |
:last-child | p:last-child | 選擇屬于其父元素最后一個子元素每一個 <p> 元素。 | 3 |
:root | :root | 決意文檔的根元素。 | 3 |
:empty | p:empty | 選擇不有子元素的每一個 <p> 元素(包括文本節點)。 | 3 |
:target | #news:target | 決意今朝勾當的 #news 元素。 | 3 |
:enabled | input:enabled | 決議每一個啟用的 <input> 元素。 | 3 |
:disabled | input:disabled | 決意每一個禁用的 <input> 元素 | 3 |
:checked | input:checked | 決定每一個中選中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 決意非 <p> 元素的每一個元素。 | 3 |
::selection | ::selection | 選擇被用戶選取的元素局部。 | 3 |
讀到這里,這篇“CSS決議器怎么用”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。