溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css選擇器指的是什么意思，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在CSS中，選擇器是選取需設置樣式的元素的模式；css選擇器指明了css樣式的作用對象，即“樣式”作用于網頁中的哪些元素，語法格式“選擇器{樣式}”。HTML頁面中的元素就是通過CSS選擇器進行控制的。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在 CSS 中，選擇器是選取需設置樣式的元素的模式。
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
每一條css樣式定義由兩部分組成，形式如下： [code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。 “選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
css有哪些選擇器
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 選擇 class="intro" 的所有元素。 |
| .class1.class2 | .name1.name2 | 選擇 class 屬性中同時有 name1 和 name2 的所有元素。 |
| .class1 .class2 | .name1 .name2 | 選擇作為類名 name1 元素后代的所有類名 name2 元素。 |
| #id | #firstname | 選擇 id="firstname" 的元素。 |
| * | * | 選擇所有元素。 |
| element | p | 選擇所有 <p> 元素。 |
| element.class | p.intro | 選擇 class="intro" 的所有 <p> 元素。 |
| element,element | div, p | 選擇所有 <div> 元素和所有 <p> 元素。 |
| element element | div p | 選擇 <div> 元素內的所有 <p> 元素。 |
| element>element | div > p | 選擇父元素是 <div> 的所有 <p> 元素。 |
| element+element | div + p | 選擇緊跟 <div> 元素的首個 <p> 元素。 |
| element1~element2 | p ~ ul | 選擇前面有 <p> 元素的每個 <ul> 元素。 |
| [attribute] | [target] | 選擇帶有 target 屬性的所有元素。 |
| [attribute=value] | [target=_blank] | 選擇帶有 target="_blank" 屬性的所有元素。 |
| [attribute~=value] | [title~=flower] | 選擇 title 屬性包含單詞 "flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 "en" 開頭的所有元素。 |
| [attribute^=value] | a[href^="https"] | 選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。 |
| [attribute*=value] | a[href*="w3schools"] | 選擇其 href 屬性值中包含 "abc" 子串的每個 <a> 元素。 |
| :active | a:active | 選擇活動鏈接。 |
| ::after | p::after | 在每個 <p> 的內容之后插入內容。 |
| ::before | p::before | 在每個 <p> 的內容之前插入內容。 |
| :checked | input:checked | 選擇每個被選中的 <input> 元素。 |
| :default | input:default | 選擇默認的 <input> 元素。 |
| :disabled | input:disabled | 選擇每個被禁用的 <input> 元素。 |
| :empty | p:empty | 選擇沒有子元素的每個 <p> 元素（包括文本節點）。 |
| :enabled | input:enabled | 選擇每個啟用的 <input> 元素。 |
| :first-child | p:first-child | 選擇屬于父元素的第一個子元素的每個 <p> 元素。 |
| ::first-letter | p::first-letter | 選擇每個 <p> 元素的首字母。 |
| ::first-line | p::first-line | 選擇每個 <p> 元素的首行。 |
| :first-of-type | p:first-of-type | 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 |
| :focus | input:focus | 選擇獲得焦點的 input 元素。 |
| :fullscreen | :fullscreen | 選擇處于全屏模式的元素。 |
| :hover | a:hover | 選擇鼠標指針位于其上的鏈接。 |
| :in-range | input:in-range | 選擇其值在指定范圍內的 input 元素。 |
| :indeterminate | input:indeterminate | 選擇處于不確定狀態的 input 元素。 |
| :invalid | input:invalid | 選擇具有無效值的所有 input 元素。 |
| :lang(language) | p:lang(it) | 選擇 lang 屬性等于 "it"（意大利）的每個 <p> 元素。 |
| :last-child | p:last-child | 選擇屬于其父元素最后一個子元素每個 <p> 元素。 |
| :last-of-type | p:last-of-type | 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。 |
| :link | a:link | 選擇所有未訪問過的鏈接。 |
| :not(selector) | :not(p) | 選擇非 <p> 元素的每個元素。 |
| :nth-child(n) | p:nth-child(2) | 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，從最后一個子元素開始計數。 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是從最后一個子元素開始計數。 |
| :only-of-type | p:only-of-type | 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 |
| :only-child | p:only-child | 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 |
| :optional | input:optional | 選擇不帶 "required" 屬性的 input 元素。 |
| :out-of-range | input:out-of-range | 選擇值超出指定范圍的 input 元素。 |
| ::placeholder | input::placeholder | 選擇已規定 "placeholder" 屬性的 input 元素。 |
| :read-only | input:read-only | 選擇已規定 "readonly" 屬性的 input 元素。 |
| :read-write | input:read-write | 選擇未規定 "readonly" 屬性的 input 元素。 |
| :required | input:required | 選擇已規定 "required" 屬性的 input 元素。 |
| :root | :root | 選擇文檔的根元素。 |
| ::selection | ::selection | 選擇用戶已選取的元素部分。 |
| :target | #news:target | 選擇當前活動的 #news 元素。 |
| :valid | input:valid | 選擇帶有有效值的所有 input 元素。 |
| :visited | a:visited | 選擇所有已訪問的鏈接。 |
以上是“css選擇器指的是什么意思”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
