點擊上方?Java項目學習?，選擇?星標?公眾號

重磅資訊、干貨，第一時間送達

前言：如果將CSS樣式應用于特定的網頁對象上，需要先找到目標元素。在CSS樣式中執行這一任務的部分被稱為選擇器。

1 標簽選擇器

• 優點：為頁面中同類型的標簽重置樣式，實現頁面效果的統一。
• 缺點：不能夠為標簽設計差異化樣式，不同頁面區域之間會互相干擾。

??

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

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

2 ID選擇器

• 特點：元素的id名稱唯一，只能應用于文檔中一個具體的對象。在使用時用#前綴符，后面緊跟指定的元素的id名稱。優先級相對較高。

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

3 類選擇器

• 特點：類選擇器是以對象的class屬性作為選擇器，在使用時以英文點(.)開頭，后面緊跟類名，在CSS中體現了代碼的重用性。優先級低于ID選擇器。

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

4 指定選擇器

• 特點：為ID選擇器或類選擇器指定目標標簽的一種特殊選擇器形式。

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

5 包含選擇器

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

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

6 子選擇器

• 特點1：復合選擇器，由前后兩個選擇符組成，它選擇被第一個選擇符包含的第二個選擇符匹配的所有子對象。
• 特點2：前后兩部分之間用一個大于號隔開，在結構上屬于父子關系。

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

7 相鄰選擇器

• 特點1：復合選擇器，由前后兩個選擇符組成，它選擇與第一個選擇符相鄰的第二個選擇符匹配的所有同級對象。
• 特點2：前后兩部分之間用+號隔開，在結構上屬于同級關系，且擁有共同的父元素。

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

8 兄弟選擇器

• 特點1：復合選擇器，由前后兩個選擇符組成，它選擇與第一個選擇符后面的第二個選擇符匹配的所有同級對象。
• 特點2：前后部分之間用一個波浪號(~)隔開，在結構上屬于同級的關系，且擁有共同的父元素。

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

9 分組選擇器

• 特點：復合選擇器。使用逗號把同組內不同對象分割。

10 偽選擇器

• 特點：以冒號(:)作為前綴，冒號后緊跟偽類或者偽對象名稱，冒號前后沒有空格。

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

11 屬性選擇器

• 特點：以對象的屬性作為選擇器。

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

12 通用選擇器

• 特點：確認文檔中所有類型元素作為選擇器，表示該樣式適用于所有網頁元素。用*表示。

13 總結

以上列舉了可能會遇到的選擇器類型和用法，在實際應用時，可根據場景選擇合適的選擇器來控制頁面的樣式。??

我們已將上述代碼上傳至Github，感興趣的同學可以自己下載代碼，觀看運行效果。您也可以自己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

往期文章：

重構 if/ else小妙招，你值得擁有！

帶你快速搭建Vue前端項目--Node篇

CSS設計基礎--初識篇

Chrome 開發者工具各種騷技巧 ! 你知道幾個？

點個在看

你最好看

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。