![跨平台移动APP设计及应用](https://wfqqreader-1252317822.image.myqcloud.com/cover/442/26179442/b_26179442.jpg)
上QQ阅读APP看书,第一时间看更新
2.2.2 CSS的选择器
所谓CSS选择器就是指定HTML文件中需要设置样式的元素。根据所选取的元素范围,CSS选择器共分为3种类型:标签选择器、id选择器和类选择器。
1.标签选择器
通过标签选择器,可以对HTML文档中的标签设计CSS样式,其设置格式如下:
标签名称{属性1:值1;属性2:值2;…}
【例2-7】 标签选择器应用示例,分别设置标签h1、h2的字号和颜色。
按题目要求,设置CSS的程序如下:
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00027003.jpg?sign=1738923530-Lj7nn2PnhLByFyKhtQluLBTHKIVh1Yv5-0-ad472b676703bcd47d209cf3f4c39985)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028001.jpg?sign=1738923530-mJVcQFSGND7LVNfqwxOqnLo7FMk8JYwC-0-15ed256ca284d6548fe700d3171f9f69)
程序运行结果如图2.8所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028002.jpg?sign=1738923530-yVgNP5QTk9K2yuQW7dJi0nVAAsfMum2Y-0-5c2a558d43f0e326060cdbf5584bcb35)
图2.8 标签选择器示例
2.id选择器
有时,需要对HTML文档中某一个元素进行样式设计,则可以对该元素设置一个id标记,从而对id标记的元素进行CSS样式设计。其设计格式如下:
#id 名称{属性1:值1;属性2:值2;…}
【例2-8】 id选择器应用示例,设置标签的id标记值为aa的字号、颜色。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00028003.jpg?sign=1738923530-lgnnL62uB8WmDhWPtLWp0C7GaBI54o0M-0-88d26fbbe2e90e18aa81c8a7d87b386d)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029001.jpg?sign=1738923530-iSrAPG527JRhhDcoLqSBXBUKLE44ejy0-0-0ca5d756f36d961c54182579f6549bd8)
程序运行结果如图2.9所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029002.jpg?sign=1738923530-qsOV1feHvYG9RVjxEXKf3RR5fmHyINHx-0-ecec0ab91c96f45a3a564901c20a30ef)
图2.9 id选择器示例
3.class类选择器
当需要对多个不同元素进行样式设计时,可以在HTML文档中对这些元素设计class标记,从而对这些标记为class的元素进行设计,其语法格式如下:
.class 名称{属性1:值1;属性2:值2;…}
【例2-9】 设置标签为h1、h2及p具有相同的字号和颜色。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00029003.jpg?sign=1738923530-bbdw5TSA9IOTIFjGWt6sIfMGMJzMNHKH-0-eb3281595bb944126fdd6e902e205f2e)
程序运行结果如图2.10所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00030001.jpg?sign=1738923530-Hs3N0kaGdYOpX55My5EwRw5rbwCSGN4C-0-ec72461534ee52ec2612b76282898f91)
图2.10 class类选择器示例