HTML连载18-id选择器与class区别class选择器使用思路后代选择器
一、id選擇器和classable選擇器的區別
| 選擇器 | CSS中的開頭 | HTML標簽可以綁定幾個 | 是否可重復 | 用途 |
| id選擇器 | # | 僅能一個 | 不可以重復（一個標簽里僅有一個） | 一般情況下是給JS用的，除非特殊情況下才給設置樣式用 |
| class選擇器 | . | 可以多個 | 可以重復（多對多的關系） | 專門用來設置樣式的 |
二、選擇器的技巧可以節省代碼行數
看好問題：做一個網頁
“我是好人”（顏色：紅色；格式：宋體）
“我是學生”（顏色：綠色；格式：宋體）
”我是壞人“（顏色：紅色；格式：楷體）
正常的編碼是：就是按照一段一段的寫
好處是清晰，每一段知道設置的什么，互不干擾，但是冗余代碼太多。
我們需要轉換思路，以屬性為中心，先設置好，在配到標簽上去，可以節省代碼。
?
.d1{ color:red;font-family: 宋體;}.d2{color:green;font-family: 宋體;}.d3{color:red;font-family: 楷體;}......省略代碼......<p class="d1">我是好人</p><p class="d2">我是學生</p><p class="d3">我是壞人</p>?
我們改進代碼：顯示的一致，這也是對class性質（多標簽可對多個class選擇器）的應用，否則我們全用id選擇器不也一樣，一旦大網站開發，涉及到文本圖片是龐大，先定義好格式，配到文本圖片
? ? ? ??
.color_red{color: red;}.color_green{color:green;}.ff_songti{font-family: 宋體;}.ff_kaiti{font-family: 楷體;}......省略代碼......<p class="color_red ff_songti">我是好人</p><p class="color_green ff_songti">我是學生</p><p class="color_red ff_kaiti">我是壞人</p>
二、后代選擇器
1.定義：找到指定標簽的所有后代標簽然后設置屬性。用途即為：企業開發會有上千上萬標簽，因此挨個寫class或者id就累死了，因此div應運而生。
2.格式：
?
標簽屬性1 標簽屬性2｛屬性：值；｝?
?
3.含義：先找到名稱叫做標簽名稱1的標簽，然后在這個標簽下面去查找所有名稱為標簽名稱2的標簽，然后再設置屬性
4.注意：
（1）后代選擇器必須使用空格隔開
?
div p{color:red;}..........省略代碼........<p>我是段落1</p><div><p>我是紅的1</p><p>我是紅的2</p></div>?
?
（2）后代不僅僅是兒子，也包括孫子/重孫子等等
?
? ? ??
div p{color:red;}..........省略代碼......<div><ul><li><p>重孫子標簽p，試一試</p></li></ul></div>?
（3）后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器（這個性質更具擴展性，代表div下面一堆各種標簽都統一了格式，選擇器樣式會有這么就是為了減輕我們的編碼負擔，能夠適配各種場景，找到最優解）
一個id的例子：
?
? ? ?
#test1 p{color:blue;}..........省略代碼...... <div id="test1" class="test2"><p>我是紅的1</p><p>我是紅的2</p></div>?
另一個class的例子：
?
? ? ? ?
.test2{color:green;}..........省略代碼...... <div id="test1" class="test2"><p>我是紅的1</p><p>我是紅的2</p></div>?
（4）div標簽里面的標簽也可以使用id，class屬性也都能搭配
格式：只演示id的，class的把#換成.就行了
?
#div的id名稱 #div里面的標簽的id名稱｛屬性：名稱；｝?
?
（5）div標簽可以向下無限延伸
格式：
?
div ul li p{屬性：值：｝?
例如：
?
? ? ?
div ul li p{color:red;}</style></head><body><p>我是段落1</p><div id="test1" class="test2"><p>我是紅的1</p><p>我是紅的2</p><ul><li><p>重孫子標簽p，試一試</p></li></ul></div>?
二、源碼：
d70_id_selector&class_selector
d71_posterity_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關注微信公眾號：傅里葉變換，后臺回復“禮包”獲取Java大數據學習視頻禮包
?
轉載于:https://www.cnblogs.com/ruigege0000/p/11111902.html
總結
以上是生活随笔為你收集整理的HTML连载18-id选择器与class区别class选择器使用思路后代选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lua5.3手册标准库拾遗
- 下一篇： NRF52810能不能替代NRF5283