選擇器.png
元素選擇器
元素選擇器.png
選擇器分組
選擇器分組在元素中間，為逗號(hào)瞧筛。
通配符： 使用了通配符之后搬葬，如果沒(méi)有指定標(biāo)簽特有的屬性斟或，那么以通配符為準(zhǔn)
* {
}
類(lèi)選擇器
- 類(lèi)選擇器允許以一種獨(dú)立與文檔元素的方式來(lái)指定樣式撤卢，例如.class{}
- 結(jié)合元素選擇器
例如：a.class{} - 多類(lèi)選擇器
例如：.class.class{}
<a class="div">echo3D</a>
a.div{ color: blue;}
結(jié)合元素選擇器.png
.class.class{}
<p class="p1">hello</p>
<p class="p2">hello</p>
<p class="p1 p2">hello</p>
.p1{
color: blue;
}
.p2{
font-size: 40px;
}
.p1.p2{ //會(huì)繼承p1 p2的屬性环凿，也可以自己設(shè)置，
font-style: italic;
}
效果圖：
class.class{}.png
ID選擇器
- ID 選擇器
ID 選擇器類(lèi)似于類(lèi)選擇器放吩，不過(guò)也有一些重要差別智听，例如：#id{} - 類(lèi)選擇器與ID選擇器的區(qū)別：
ID 選擇器在文檔中使用一次，而類(lèi)可以多次使用
ID 選擇器不能結(jié)合使用
當(dāng)使用JS的時(shí)候渡紫，需要用到ID到推，因?yàn)镴S方法中有個(gè)getElementByID
屬性選擇器詳解
- 簡(jiǎn)單屬性詳解
例如：[title]{}
<p title ="p1">hello</p>
<style>
[title]{
color: red;
}
- 根據(jù)具體屬性值選擇：
除了選擇擁有某些的元素，還可以進(jìn)一步縮小選擇范圍腻惠，只選擇有特性屬性值的元素环肘，例如：a[href = "www.echo.com"]{} - 屬性和屬性值必須完全匹配
- 根據(jù)部分屬性值選擇
根據(jù)部分屬性值選擇，通過(guò)[title~="title"]模糊查詢(xún)集灌，主要屬性值包含title就會(huì)做出相應(yīng)的改變
[title~="title"]{
font-size: 50px;
}
<p title ="tit">hello</p>
<p title ="title">hello</p>
<p title ="title hello">hello</p>
<p title ="t">hello</p>
效果圖：
屬性選擇器值模糊查詢(xún).png
后代選擇器
- 后代選擇器：后代選擇器可以作為選擇作為某元素后代的元素
<p>this is my <strong><i>hello</i></strong> page</p>
p strong i{ //通過(guò) p i 也能找到
color: blue;
}
效果圖：
>子元素選擇器
與后代選擇器相比悔雹，子元素選擇器只能作為某元素子元素的元素例如：h1>strong{};
以上面的例子為例，如果通過(guò)子元素選擇器要找到i標(biāo)簽 必須通過(guò)這樣：
p>strong>i{
color: fuchsia; font-size: 30px;
}
>相鄰兄弟選擇器
可選擇緊接在另一個(gè)元素后的元素欣喧，且二者有相同元素腌零，例如：h1 +p{};
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
li+li{
font-size: 50px; color: brown;
}
效果圖
