網頁學習(三) css各種選擇器
阿新 • • 發佈:2020-11-27
根據https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors學習
選擇器:它是元素和其他部分組合起來告訴瀏覽器哪個HTML元素應當是被選為應用規則中的CSS屬性值的方式 選擇器列表: 其實是組合定義的方式 h1, .special { color: blue; } 當你使用選擇器列表時,如果任何一個選擇器無效 (存在語法錯誤),那麼整條規則都會被忽略。 1.型別、類和ID選擇器 h1 { }
類選擇器以一個句點(.
)開頭,會選擇文件中應用了這個類的所有物件。點前面加型別,可以特化這個類只用於這個型別。還能多個點,代表多對一。 .box { }
ID選擇器開頭為#
而非句點,不過基本上和類選擇器是同種用法。可是在一篇文件中,一個ID只會用到一次。它能選中設定了id
的元素,你能把ID放在型別選擇器之前,只指向元素和ID都匹配的類 #unique { } 2.標籤屬性選擇器 這組選擇器根據一個元素上的某個標籤的屬性的存在以選擇元素的不同方式: a[title] { } 或者根據一個有特定值的標籤屬性是否存在來選擇: a[href="https://example.com"] { } 3.偽類與偽元素 這組選擇器包含了偽類,用來樣式化一個元素的特定狀態。例如:hover偽類會在滑鼠指標懸浮到一個元素上的時候選擇這個元素: a:hover { } 它還可以包含了偽元素,選擇一個元素的某個部分而不是元素自己。例如,::first-line是會選擇一個元素(下面的情況中是<p>)中的第一行,類似<span>包在了第一個被格式化的行外面,然後選擇這個<span>。 p::first-line { } 4.運算子 最後一組選擇器可以將其他選擇器組合起來,更復雜的選擇元素。下面的示例用運算子(>)選擇了<article>元素的初代子元素。 article > p { } 5.全域性選擇器 全域性選擇器,是由一個星號(*)代指的,它選中了文件中的所有內容
存否和值選擇器
子字串匹配選擇器
i可以讓選擇器不敏感
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}