点击上方 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 开发者工具各种骚技巧 ! 你知道几个？
点个在看
你最好看
