標簽選擇器
- 什么是標簽選擇器
- 作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性
- 格式：
標簽名稱｛屬性:值;｝
注意點： - 標簽選擇器選中的是當前界面中所有的標簽，而不能單獨選中某一個標簽
- 標簽選擇器無論標簽藏的多深都能選中
- 只要是 HTML 中的標簽就可以作為標簽選擇器 (h/a/img/ul/ol/dl/input....)
id 選擇器
- 什么是 id選擇器
- 作用：根據指定的 id 名稱找到對應的標簽，然后設置屬性
- 格式：
#id名稱{屬性:值;}
注意點 - 每個 html 標簽都有一個屬性叫做 id，也就是每個標簽都可以設置 id
- 在同一個界面中 id 的名稱是不可以重復的
- 在編寫 id 選擇器時一定要在 id 名稱前面加上 #
- id 的名稱是有一定規范的：id 的名稱只能由字母、數字、下劃線 a-z 0-9 _
- id 名稱不能以數字開頭
- id 名稱不能是 HTML 標簽的名稱，不能是 a h1 img input...
- 在企業開發中一般情況下如果僅僅是為了設置樣式，我們不會使用 Id,因為在前端開發中 id 是留給 js 使用的
例子
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
類選擇器
- 什么是類選擇器
- 作用:根據指定的類名稱找到對應的標簽，然后設置屬性
- 格式：
.類名｛屬性:值;｝
注意點 - 每一個 HTML 標簽都有一個屬性叫做 class，也就是說每個標簽都可以設置類名
- 在同一個界面中 class 的名稱是可以重復的
- 在編寫 class 選擇器時一定要在 class 名稱前面加上 .
- 類名的命名規范和 Id 名稱的命名規范一樣
- 類名就是專門用來個 CSS 設置樣式的
- 在html 中每個標簽可以同時綁定多個類名
- 格式：
<標簽名稱 class="類名1 類名2 ...">
id 選擇器和 class 選擇器
id 和 class 的區別
id相當于人的身份證不可以重復，class 相當于人名可以重復
一個 html 標簽只能綁定一個 id 名稱，一個 HTML 標簽可以綁定多個 class 名稱
id 選擇器和 class 選擇器的區別
id 選擇器是以 # 開頭的，class 選擇器時以 . 開頭的
在企業開發中到底用 Id 選擇器還是用 class 選擇器？
id 一般情況下是給 js 使用的，所以除非特殊情況，否則不要使用 id 去設置樣式
在企業開發中一個開發人員對類的使用可以看出這個開發人員的技術水平，一般情況下在企業開發中要注重冗余代碼抽取到一個類選擇器中，然后讓標簽和這個類選擇器綁定即可
后代選擇器
- 什么是后代選擇器
- 作用：找到指定標簽的所有特定的后代標簽，設置屬性
- 格式：
標簽名稱1 標簽名稱2｛屬性:值;｝
先找到所有名稱叫做 "標簽名稱1"的標簽，然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽，然后再設置屬性div p{}
注意點 - 后代選擇器必須用空格隔開
- 后代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標簽中的都是后代
- 后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器
- 后代選擇器可以通過空格一直延續下去
div ul li p{}
子元素選擇器
- 什么是子元素選擇器
- 作用：找到指定標簽中所有特定的直接子元素，然后設置屬性
格式：標簽名稱1>標簽名稱2{屬性:值;}
先找到所有名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
注意點 - 子元素選擇器只會查找兒子，不會查找其他被嵌套的標簽
- 子元素選擇器之間需要用 > 符號鏈接，并且不能有空格
- 子元素選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器
- 子元素選擇器可以通過 > 符號一直延續下去
div>ul>li>p
后代選擇器和子元素選擇器
后代選擇器和子元素選擇器的區別
后代選擇器使用空格作為鏈接符號，子元素選擇器使用 > 作為鏈接符號
后代選擇器會選中指定標簽中，所有的特定后代標簽，也就是會選中兒子/孫子...，只要是被放到指定標簽中的特定標簽都會被選中，子元素選擇器只會選中指定標簽中，所有的特定的直接標簽，也就是只會選中特定的兒子標簽
后代選擇器和子元素選擇器的共同點
后代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器
后代選擇器和子元素選擇器都可以通過各自的鏈接符號一直延續下去
選擇器1>選擇器2>選擇器3>選擇器4{}在企業開發中如何選擇
如果向選中指定標簽中的所有特定的標簽，那么就使用后代選擇器如果只想選中指定標簽中的所有特定兒子標簽，那么就使用子元素選擇器
交集選擇器
- 什么是交集選擇器
- 作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
格式：選擇器1選擇器2{屬性:值;}
注意點： - 選擇器和選擇器之間沒有任何的鏈接符號
- 選擇器可以使用標簽名稱/id名稱/class名稱
- 交集選擇器僅僅作為了解，企業開發中用的并不多
并集選擇器
- 什么是并集選擇器
-作用：給所有選擇器選中的標簽設置屬性 - 格式：
選擇器1,選擇器2{屬性:值;}
注意點： - 并集選擇器必須使用 , 來鏈接
- 選擇器可以使用標簽名稱/id名稱/class名稱
兄弟選擇器
- 相鄰兄弟選擇器 CSS2
- 作用：給指定選擇器后面緊跟的哪個選擇器選中的標簽設置屬性
- 格式：
選擇器1+選擇器2{屬性:值;}
注意點： - 相鄰兄弟選擇器必須通過 + 鏈接
- 相鄰兄弟選擇器只能選中緊跟其后的哪個標簽，不能選中被隔開的標簽
<style>
h1+p{
color: green;
}
</style>
<body>
<h1>我是標題</h1>
<a href="#">我是超鏈接</a>
<p>我是段落</p> <!--不變色-->
<p>我是段落</p>
<a href="#">我是超鏈接</a>
<p>我是段落</p> (!--不變色--)
<h1>我是標題</h1>
<p>我是段落</p> <!--變色-->
<p>我是段落</p>
<p>我是段落</p>
</body>
- 通用兄弟選擇器 CSS3
- 作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
- 格式：選擇器1~選擇器2｛屬性:值;｝
注意點： - 通用兄弟選擇器必須用~鏈接
- 通用兄弟選擇器選中的是指定選擇器后面某個選擇器中的所有標簽，無論有沒有被隔開都可以選中
<style>
h1~p{
color: green;
}
</style>
<body>
<h1>我是標題</h1>
<a href="#">我是超鏈接</a>
<p>我是段落</p> <!--變色-->
<p>我是段落</p>
<a href="#">我是超鏈接</a>
<p>我是段落</p> (!--變色--)
<h1>我是標題</h1>
<p>我是段落</p> <!--變色-->
<p>我是段落</p>
<p>我是段落</p>
</body>
