HTML连载18-id选择器与class区别class选择器使用思路后代选择器
一、id選擇器和classable選擇器的區(qū)別
| 選擇器 | CSS中的開(kāi)頭 | HTML標(biāo)簽可以綁定幾個(gè) | 是否可重復(fù) | 用途 |
| id選擇器 | # | 僅能一個(gè) | 不可以重復(fù)（一個(gè)標(biāo)簽里僅有一個(gè)） | 一般情況下是給JS用的，除非特殊情況下才給設(shè)置樣式用 |
| class選擇器 | . | 可以多個(gè) | 可以重復(fù)（多對(duì)多的關(guān)系） | 專門用來(lái)設(shè)置樣式的 |
二、選擇器的技巧可以節(jié)省代碼行數(shù)
看好問(wèn)題：做一個(gè)網(wǎng)頁(yè)
“我是好人”（顏色：紅色；格式：宋體）
“我是學(xué)生”（顏色：綠色；格式：宋體）
”我是壞人“（顏色：紅色；格式：楷體）
正常的編碼是：就是按照一段一段的寫(xiě)
好處是清晰，每一段知道設(shè)置的什么，互不干擾，但是冗余代碼太多。
我們需要轉(zhuǎn)換思路，以屬性為中心，先設(shè)置好，在配到標(biāo)簽上去，可以節(jié)省代碼。
?
.d1{ color:red;font-family: 宋體;}.d2{color:green;font-family: 宋體;}.d3{color:red;font-family: 楷體;}......省略代碼......<p class="d1">我是好人</p><p class="d2">我是學(xué)生</p><p class="d3">我是壞人</p>?
我們改進(jìn)代碼：顯示的一致，這也是對(duì)class性質(zhì)（多標(biāo)簽可對(duì)多個(gè)class選擇器）的應(yīng)用，否則我們?nèi)胕d選擇器不也一樣，一旦大網(wǎng)站開(kāi)發(fā)，涉及到文本圖片是龐大，先定義好格式，配到文本圖片
? ? ? ??
.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">我是學(xué)生</p><p class="color_red ff_kaiti">我是壞人</p>
二、后代選擇器
1.定義：找到指定標(biāo)簽的所有后代標(biāo)簽然后設(shè)置屬性。用途即為：企業(yè)開(kāi)發(fā)會(huì)有上千上萬(wàn)標(biāo)簽，因此挨個(gè)寫(xiě)class或者id就累死了，因此div應(yīng)運(yùn)而生。
2.格式：
?
標(biāo)簽屬性1 標(biāo)簽屬性2｛屬性：值；｝?
?
3.含義：先找到名稱叫做標(biāo)簽名稱1的標(biāo)簽，然后在這個(gè)標(biāo)簽下面去查找所有名稱為標(biāo)簽名稱2的標(biāo)簽，然后再設(shè)置屬性
4.注意：
（1）后代選擇器必須使用空格隔開(kāi)
?
div p{color:red;}..........省略代碼........<p>我是段落1</p><div><p>我是紅的1</p><p>我是紅的2</p></div>?
?
（2）后代不僅僅是兒子，也包括孫子/重孫子等等
?
? ? ??
div p{color:red;}..........省略代碼......<div><ul><li><p>重孫子標(biāo)簽p，試一試</p></li></ul></div>?
（3）后代選擇器不僅僅可以使用標(biāo)簽名稱，還可以使用其他選擇器（這個(gè)性質(zhì)更具擴(kuò)展性，代表div下面一堆各種標(biāo)簽都統(tǒng)一了格式，選擇器樣式會(huì)有這么就是為了減輕我們的編碼負(fù)擔(dān)，能夠適配各種場(chǎng)景，找到最優(yōu)解）
一個(gè)id的例子：
?
? ? ?
#test1 p{color:blue;}..........省略代碼...... <div id="test1" class="test2"><p>我是紅的1</p><p>我是紅的2</p></div>?
另一個(gè)class的例子：
?
? ? ? ?
.test2{color:green;}..........省略代碼...... <div id="test1" class="test2"><p>我是紅的1</p><p>我是紅的2</p></div>?
（4）div標(biāo)簽里面的標(biāo)簽也可以使用id，class屬性也都能搭配
格式：只演示id的，class的把#換成.就行了
?
#div的id名稱 #div里面的標(biāo)簽的id名稱｛屬性：名稱；｝?
?
（5）div標(biāo)簽可以向下無(wú)限延伸
格式：
?
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>重孫子標(biāo)簽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.歡迎關(guān)注微信公眾號(hào)：傅里葉變換，后臺(tái)回復(fù)“禮包”獲取Java大數(shù)據(jù)學(xué)習(xí)視頻禮包
?
轉(zhuǎn)載于:https://www.cnblogs.com/ruigege0000/p/11111902.html
總結(jié)
以上是生活随笔為你收集整理的HTML连载18-id选择器与class区别class选择器使用思路后代选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Lua5.3手册标准库拾遗
- 下一篇： ie浏览器修复_继IE之后，微软要彻底放