css 選擇器
阿新 • • 發佈：2020-10-26
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>開始學習CSS</title> <style type="text/css"> <!-- CSS元素選擇器(也稱為型別選擇器)通過node節點名稱匹配元素. 因此,在單獨使用時,尋找特定型別的元素時,元素選擇器都會匹配該文件中所有此型別的元素. 元素 {樣式宣告 } --> span{ background-color: DodgerBlue; color: #ffffff; } <!-- css類選擇器,在一個HTML文件中，CSS類選擇器會根據元素的類屬性中的內容匹配元素。類屬性被定義為一個以空格分隔的列表項，在這組類名中，必須有一項與類選擇器中的類名完全匹配，此條樣式宣告才會生效。 .類名 {樣式宣告 } --> .class_name { color: red; font-size: 300%; } <!-- ID 選擇器在一個HTML文件中,CSS ID 選擇器會根據該元素的 ID 屬性中的內容匹配元素,元素 ID 屬性名必須與選擇器中的 ID 屬性名完全匹配，此條樣式宣告才會生效。 #id屬性值 {樣式宣告 } --> #id_name { border: red 2px solid; } <!-- 通配選擇器 在CSS中,一個星號(*)就是一個通配選擇器.它可以匹配任意型別的HTML元素.在配合其他簡單選擇器的時候,省略掉通配選擇器會有同樣的效果.比如,*.warning 和.warning 的效果完全相同. 在CSS3中,星號(*)可以和名稱空間組合使用: ns|* - 會匹配ns名稱空間下的所有元素 *|* - 會匹配所有名稱空間下的所有元素 |* - 會匹配所有沒有名稱空間的元素 --> *{ color: green; } <!-- 屬性選擇器 CSS 屬性選擇器通過已經存在的屬性名或屬性值匹配元素。 語法 [attr] 表示帶有以 attr 命名的屬性的元素。 [attr=value] 表示帶有以 attr 命名的屬性，且屬性值為 value 的元素。 [attr~=value] 表示帶有以 attr 命名的屬性的元素，並且該屬性是一個以空格作為分隔的值列表，其中至少有一個值為 value。 [attr|=value] 表示帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為字首（"-"為連字元，Unicode 編碼為 U+002D）開頭。典型的應用場景是用來匹配語言簡寫程式碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。 [attr^=value] 表示帶有以 attr 命名的屬性，且屬性值是以 value 開頭的元素。 [attr$=value] 表示帶有以 attr 命名的屬性，且屬性值是以 value 結尾的元素。 [attr*=value] 表示帶有以 attr 命名的屬性，且屬性值至少包含一個 value 值的元素。 [attr operator value i] 在屬性選擇器的右方括號前新增一個用空格隔開的字母 i（或 I），可以在匹配屬性值時忽略大小寫（支援 ASCII 字元範圍之內的字母）。 [attr operator value s] 在屬性選擇器的右方括號前新增一個用空格隔開的字母 s（或 S），可以在匹配屬性值時區分大小寫（支援 ASCII 字元範圍之內的字母）。 --> a[href*='example'] { color: red; } <!-- 相鄰兄弟選擇器 (+) 介於兩個選擇器之間，當第二個元素緊跟在第一個元素之後，並且兩個元素都是屬於同一個父元素的子元素，則第二個元素將被選中 語法：former_element + target_element { style properties } --> h1 + p { color: green; } <!-- 通用兄弟選擇符，位置無須緊鄰，只須同層級，A~B 選擇A元素之後所有同層級B元素。 former_element ~ target_element { style properties } --> p ~ span { color: red; } <!-- 後代選擇器當使用 ␣ 選擇符 (這裡代表一個空格,更確切的說是一個或多個的空白字元) 連線兩個元素時使得該選擇器可以只匹配那些由第一個元素作為祖先元素的所有第二個元素(後代元素) . 後代選擇器與 子選擇器 很相似, 但是後代選擇器不需要相匹配元素之間要有嚴格的父子關係. 元素1 元素2 {樣式宣告 } --> div p { color: green; font-size: 50px; } <!-- 子選擇器 當使用 > 選擇符分隔兩個元素時,它只會匹配那些作為第一個元素的直接後代(子元素)的第二元素. 與之相比, 當兩個元素由 後代選擇器 相連時, 它表示匹配存在的所有由第一個元素作為祖先元素(但不一定是父元素)的第二個元素, 無論它在 DOM 中"跳躍" 多少次. 元素1 > 元素2 {樣式宣告 } 與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。 --> h1 > strong {color:red;} <!-- 偽類選擇器:CSS 偽類用於向某些選擇器新增特殊的效果。 a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */ --> a.Pseudo_name:link { color: red;} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> <h1>我是一級標題</h1> <p>相鄰兄弟選擇器</p> <a href="http://example.com">連結</a> <p>這是一個段落文字. 在文字中有一個 <span>span element</span> 並且還有一個 <a href="http://example.com">連結</a>.</p> <p>這是第二段. 包含了一個 <em>強調</em> 元素.</p> <p class="class_name"> 類選擇器</p> <p> <span id="id_name"> ID 選擇器 </span></p> <ul> <li>專案1</li> <li>專案2</li> <li>專案 <em>三</em></li> </ul> <span>This is not red.</span> <p>Here is a paragraph.</p> <code>Here is some code.</code> <span>And here is a span.</span> <div> <p>後代選擇器</p> </div> <div> <p> 後代選擇器</p> </div> <hr> <a class="Pseudo_name" href="https://www.baidu.com"> 超連結</a> </body> </html>