點(diǎn)擊上方?Java項(xiàng)目學(xué)習(xí)?，選擇?星標(biāo)?公眾號(hào)

重磅資訊、干貨，第一時(shí)間送達(dá)

前言：如果將CSS樣式應(yīng)用于特定的網(wǎng)頁(yè)對(duì)象上，需要先找到目標(biāo)元素。在CSS樣式中執(zhí)行這一任務(wù)的部分被稱為選擇器。

1 標(biāo)簽選擇器

• 優(yōu)點(diǎn)：為頁(yè)面中同類型的標(biāo)簽重置樣式，實(shí)現(xiàn)頁(yè)面效果的統(tǒng)一。
• 缺點(diǎn)：不能夠?yàn)闃?biāo)簽設(shè)計(jì)差異化樣式，不同頁(yè)面區(qū)域之間會(huì)互相干擾。

??

????????《上邪》

上邪，?我欲與君相知，長(zhǎng)命無絕衰。山無陵，江水為竭。冬雷震震，夏雨雪。天地合，乃敢與君絕。
??

2 ID選擇器

• 特點(diǎn)：元素的id名稱唯一，只能應(yīng)用于文檔中一個(gè)具體的對(duì)象。在使用時(shí)用#前綴符，后面緊跟指定的元素的id名稱。優(yōu)先級(jí)相對(duì)較高。

"poem2">"title">《思帝鄉(xiāng)·春日游》"author">【唐】韋莊"content">春日游，杏花吹滿頭。"content">陌上誰家年少足風(fēng)流？"content">妾擬將身嫁與一生休。"content">縱被無情棄，不能羞。

3 類選擇器

• 特點(diǎn)：類選擇器是以對(duì)象的class屬性作為選擇器，在使用時(shí)以英文點(diǎn)(.)開頭，后面緊跟類名，在CSS中體現(xiàn)了代碼的重用性。優(yōu)先級(jí)低于ID選擇器。

"poem-id"?class="poem-class">
????????《離思五首·其四》?【唐】元稹??曾經(jīng)滄海難為水，??除卻巫山不是云。?取次花叢懶回顧，?半緣修道半緣君。

4 指定選擇器

• 特點(diǎn)：為ID選擇器或類選擇器指定目標(biāo)標(biāo)簽的一種特殊選擇器形式。

???"head">
????????《白頭吟》【漢】卓文君?皚如山上雪，皎若云間月。?聞君有兩意，故來相決絕。?今日斗酒會(huì)，明旦溝水頭。?躞蹀御溝上，溝水東西流。?凄凄復(fù)凄凄，嫁娶不須啼。"snow">?愿得一心人，白頭不相離。?竹竿何裊裊，魚尾何簁簁！?男兒重意氣，何用錢刀為！
???

5 包含選擇器

• 特點(diǎn)：復(fù)合選擇器，由前后兩個(gè)選擇符組成(中間空格隔開)，它選擇被第一個(gè)選擇符包含的第二個(gè)選擇符匹配的所有后代元素對(duì)象。
• 注意：必須保證第一個(gè)選擇符匹配的對(duì)象能夠包含第二個(gè)選擇符匹配的對(duì)象。

???
????????《采桑子·恨君不似江樓月》【宋】呂本中"hate">恨君不似江樓月，南北東西。南北東西。只有相隨無別離。"hate">恨君卻似江樓月，暫滿還虧。暫滿還虧。待得團(tuán)團(tuán)是幾時(shí)。
???

6 子選擇器

• 特點(diǎn)1：復(fù)合選擇器，由前后兩個(gè)選擇符組成，它選擇被第一個(gè)選擇符包含的第二個(gè)選擇符匹配的所有子對(duì)象。
• 特點(diǎn)2：前后兩部分之間用一個(gè)大于號(hào)隔開，在結(jié)構(gòu)上屬于父子關(guān)系。

??"rain-in-night">
????????《夜雨寄北》【唐】李商隱君問歸期未有期，巴山夜雨漲秋池。何當(dāng)共剪西窗燭，卻話巴山夜雨時(shí)。
??

7 相鄰選擇器

• 特點(diǎn)1：復(fù)合選擇器，由前后兩個(gè)選擇符組成，它選擇與第一個(gè)選擇符相鄰的第二個(gè)選擇符匹配的所有同級(jí)對(duì)象。
• 特點(diǎn)2：前后兩部分之間用+號(hào)隔開，在結(jié)構(gòu)上屬于同級(jí)關(guān)系，且擁有共同的父元素。

??"live-near-river">
????????《卜算子·我住長(zhǎng)江頭》"song-author-li">?【宋】李之儀我住長(zhǎng)江頭，君住長(zhǎng)江尾。日日思君不見君，共飲長(zhǎng)江水。此水幾時(shí)休，此恨何時(shí)已。只愿君心似我心，定不負(fù)相思意。
??

8 兄弟選擇器

• 特點(diǎn)1：復(fù)合選擇器，由前后兩個(gè)選擇符組成，它選擇與第一個(gè)選擇符后面的第二個(gè)選擇符匹配的所有同級(jí)對(duì)象。
• 特點(diǎn)2：前后部分之間用一個(gè)波浪號(hào)(~)隔開，在結(jié)構(gòu)上屬于同級(jí)的關(guān)系，且擁有共同的父元素。

??"teenager-play">《少年游·并刀如水》"song-author-zhou">?【宋】周邦彥并刀如水，吳鹽勝雪，纖手破新橙。錦幄初溫，獸煙不斷，相對(duì)坐調(diào)笙。低聲問向誰行宿，城上已三更。馬滑霜濃，不如休去，直是少人行。
??

9 分組選擇器

• 特點(diǎn)：復(fù)合選擇器。使用逗號(hào)把同組內(nèi)不同對(duì)象分割。

10 偽選擇器

• 特點(diǎn)：以冒號(hào)(:)作為前綴，冒號(hào)后緊跟偽類或者偽對(duì)象名稱，冒號(hào)前后沒有空格。

??《臨江仙·夢(mèng)后樓臺(tái)高鎖》【宋】晏幾道夢(mèng)后樓臺(tái)高鎖，酒醒簾幕低垂。去年春恨卻來時(shí)。落花人獨(dú)立，微雨燕雙飛。記得小蘋初見，兩重心字羅衣。琵琶弦上說相思。當(dāng)時(shí)明月在，曾照彩云歸。
??

11 屬性選擇器

• 特點(diǎn)：以對(duì)象的屬性作為選擇器。

??"spring">《長(zhǎng)命女·春日宴》【南唐】馮延巳春日宴，綠酒一杯歌一遍。再拜陳三愿：一愿郎君千歲，二愿妾身常健，三愿如同梁上燕，歲歲長(zhǎng)相見。
??

12 通用選擇器

• 特點(diǎn)：確認(rèn)文檔中所有類型元素作為選擇器，表示該樣式適用于所有網(wǎng)頁(yè)元素。用*表示。

13 總結(jié)

以上列舉了可能會(huì)遇到的選擇器類型和用法，在實(shí)際應(yīng)用時(shí)，可根據(jù)場(chǎng)景選擇合適的選擇器來控制頁(yè)面的樣式。??

我們已將上述代碼上傳至Github，感興趣的同學(xué)可以自己下載代碼，觀看運(yùn)行效果。您也可以自己DIY自己想要的樣式。

附Github鏈接:?

https://github.com/web-project-union/Java-Project-Learning/tree/dev/CSS%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80--%E9%80%89%E6%8B%A9%E5%99%A8%E7%AF%87

往期文章：

重構(gòu) if/ else小妙招，你值得擁有！

帶你快速搭建Vue前端項(xiàng)目--Node篇

CSS設(shè)計(jì)基礎(chǔ)--初識(shí)篇

Chrome 開發(fā)者工具各種騷技巧 ! 你知道幾個(gè)？

點(diǎn)個(gè)在看

你最好看

總結(jié)

以上是生活随笔為你收集整理的css 大于号 标签_CSS设计基础选择器篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。