CSS 的 類class選擇器 的正確寫法
阿新 • • 發佈:2018-12-26
1.
正確寫法:
前面是標籤名的萬用字元,後面是 class的名稱。()
*.a_class {color:red;}
下面的簡寫,儘量少用
.a_class {color:red;}
2.舉例
舉例:
p.a_class {}
解釋為:“其 class 屬性值為 a_class 的所有段落”。
舉例2:
*.a_class {}
解釋為:“其 class 屬性值為 a_class 的所有任意標籤”。
3.多層類疊加:
同一個 <p>
標籤,同時擁有兩個 class屬性。
<p class="important warning" >
This paragraph is a very important warning.
</p>
*.important.warning {background:silver;}
解釋為:“其 class 屬性值同時為 important 且為 warning 的所有任意標籤”。
4.延伸
ID選擇器的正確寫法
*#intro {font-weight:bold;}
選擇器分組
h1, h2, h3, h4, h5, h6 {color:blue;}
如果希望選擇有某個屬性的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器。
將同時有 href 和 title 屬性的 HTML 超連結的文字設定為紅色。
a[href][title] {color:red;}
假設我們為描述太陽系行星設計了一個 XML 文件。如果我們想選擇有 moons 屬性的所有 planet 元素,使之顯示為紅色,以便能更關注有 moons 的行星,就可以這樣寫:
planet[moons] {color:red;}
除了選擇擁有某些屬性的元素,還可以進一步縮小選擇範圍,只選擇有特定屬性值的元素。
例如,假設希望將指向 Web 伺服器上某個指定文件的超連結變成紅色,可以這樣寫:
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
或者,與簡單屬性選擇器類似,可以把多個屬性-值選擇器連結在一起來選擇一個文件。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
5.正好寫油猴(TamperMonkey)指令碼,所需要的後代選擇器
h1 em {color:red;}
(注意和 選擇器分組 之間的區別,一個沒逗號,一個有逗號。)
主區的背景為白色,
主區的連結為藍色。
div.maincontent {background:white;}
div.maincontent a:link {color:blue;}
6.更遠的延伸
子元素選擇器
相鄰兄弟選擇器