![Python网络爬虫入门到实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/96/48894096/b_48894096.jpg)
1.6 选择器
选择器种类很多,学习一些常用的标签即可,如下所示。
1)标签选择器。
2)类选择器。
3)ID选择器。
4)全局选择器。
5)属性选择器。
6)包含选择器。
不同的资料对其称呼可能不同,但是使用方法基本一样。
1.6.1 标签选择器
下面有一段很基础的html代码(案例文件:CSS/1.html),如下所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/38_02.jpg?sign=1739523045-KD2iu8hrNFYOYI8eqV8ooB2YPB09OIjy-0-f53b3fc1f1ec8a30db75139a9366c182)
运行结果如图1-44所示。
从运行结果中可以发现,每一个段落都在一对<p></p>标签中,如果想设置颜色和字体居中等,逐个去修改就太麻烦了。这里可以使用CSS中的标签选择器,一般将它放到head的<style></style>标签中。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/39_01.jpg?sign=1739523045-jAj24ttBgricnfwhi8CNqBVYd54dULQ3-0-4ee57c62a56804a5bd38a732906b4df7)
•图1-44 运行结果
案例:将上面的一段HTML字体位置设置为居中,颜色设置为红色,只需要在<head></head>中添加如下标签内容即可。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/39_02.jpg?sign=1739523045-0RuShdUbsbnJXTQ8jRoxk0hkDshjfsaC-0-fe907f21fab24291c2169dc85b6d6e71)
补充说明:
1)p是CSS中的选择器,它指向的是p标签。
2)color是颜色属性,red是它的属性值,也可以尝试修改为别的值。
3)text-align是文本位置属性,值为center表示居中。
这样就能实现所有<p>标签的调整,修改效果如图1-45所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/39_03.jpg?sign=1739523045-MSDv1a7hin8KxLo2gzqxM5z2vgrttkK0-0-ec44b5cda9163d61f6d2f7ca3fa5d07a)
•图1-45 修改效果
完整代码如下所示(案例文件:CSS/1.html)。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/39_04.jpg?sign=1739523045-Nbra4NdqFdLJtGZiql18xO4QFyZPeUh9-0-fa9f3483e297698489a0bd888e58c4d5)
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/40_01.jpg?sign=1739523045-svTBLDiso3NVPS2P6jydvFBNgkW3No7q-0-01a359cc0e620be206ab091d898967b2)
1.6.2 类选择器
前文使用标签选择器实现了所有相同名称的标签修改样式,如果只需要修改其中一部分的样式呢?这里就要用到类选择器了。
如果只想修改某个标签,这个标签必须有特定的class元素。在class名称前加点,表示只对class为特定某个名称的标签进行修改。例如下面例子所示,对class为test的p标签进行修改,而class为test2的p标签并没有修改(案例文件:CSS/2.html)。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/40_02.jpg?sign=1739523045-2latBBYQZIZ8vk2zuG2G36cNCnbraNoy-0-f312592562a8ed13de137b594fa5c19e)
修改效果如图1-46所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/41_01.jpg?sign=1739523045-JZVphLWfjDC4jA1BuusRY8pQVJ9rolYq-0-92f5aac2e46fd59432709d7791edda91)
•图1-46 修改效果
1.6.3 ID选择器
和类选择器的用法基本相同,区别在于:ID选择器最好在同一个页面中只使用一次。修改id需要在开头添加#号,后跟该元素的id值,比如下面的例子对id值为special的标签修改为红色居中(案例文件:CSS/3.html)。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/41_02.jpg?sign=1739523045-hsAPtmkiZm8MbaJ1Z1KY5O5ft2SEchcV-0-094d55fb3d4ac6d4d5e0fdcc19e3ee84)
执行效果如图1-47所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/41_03.jpg?sign=1739523045-1KhpH6OAWjs1Hv1JRaBooyMKqlpSkaXK-0-9243f6d5696d7ca17b200c19757e098a)
•图1-47 执行效果
1.6.4 全局选择器
如果想要对所有标签做相同的修改,只需要用*号来选择即可。比如下面这段代码,不管它是class还是id,统一修改为红色居中(案例文件:CSS/4.html文件)。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/42_01.jpg?sign=1739523045-hkGP84U6VQWKfGyYwyR8kVnav4Lf1JNQ-0-6c0f1ab592af813891bcc96c7a371e35)
执行效果如图1-48所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/42_02.jpg?sign=1739523045-YTzuhfn1F1qZPZRGiBAYxf5uMFRInLD6-0-cca44d1bbe04f7b41d8f0805fde412f5)
•图1-48 执行效果
1.6.5 属性选择器
属性选择器可以根据元素的属性及属性值来选择。它的基本语法有如下类似形式。
1)形式1。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/42_03.jpg?sign=1739523045-JVpY2XXgyVda2A2yW9JV0KJY1aE1Pita-0-31f1fa807f89905cbe3510e483480d6f)
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/43_01.jpg?sign=1739523045-NInSQEtz0U8jmvIs4Fp9XjOrPgIiCZ10-0-160e07990d226e10ff0832ab238a63fa)
2)方式2。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/43_02.jpg?sign=1739523045-X0IepRqRphqQCcEBVjiwwc7u7uE9X9rv-0-dea1bc916f5becc664bde570a00b7ae0)
案例1:将<p>标签中包含class的元素对应的内容修改为蓝色且居中,案例代码如下。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/43_03.jpg?sign=1739523045-8ubOLUFQbSMJ87BgHTBEuTBgOaVajuLl-0-a58bc9e42f108b38c4abb34a18d2dfe2)
效果如图1-49所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/43_04.jpg?sign=1739523045-I0rhMWmhohCxBhWmeUGaYHl1XDCqyQCU-0-53c542ec5eca3ffb5f2ae6319d840452)
•图1-49 案例1执行效果
案例2:将<p>标签中class属性且属性值为bold的内容修改为蓝色且居中(案例文件:CSS/5.html),案例代码如下。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/44_01.jpg?sign=1739523045-flosdTK0KUIPxFW3M5QHp26OAXL1LaEb-0-3c113f1a0a4e811215a3a1b45bd9477f)
执行效果如图1-50所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/44_02.jpg?sign=1739523045-mxDmtb5y7GK5e7O1cEIxxsQFb1CyDZK3-0-fc3bf2bbb66336670587495780270588)
•图1-50 案例2执行效果
1.6.6 包含选择器
包含选择器适用于稍微复杂一点的网页,因为一般的标签不会全部直接堆积在<body></body>中,在<body></body>中也有可能是分开管理的。
包含选择器的基本语法为:
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/44_03.jpg?sign=1739523045-WA3z9QITTQmzVUDtbS6BM1G8NJJlC1Zy-0-2f554ef568a10f8bf5e42d8bc4bb4119)
案例:修改</div>标签中<p>标签的颜色为红色且居中(案例文件:CSS/6.htlml),案例代码如下。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/44_04.jpg?sign=1739523045-4RvOXmkBVfoXvcRhcSbqEiEtDAFeY4u9-0-b683a57639201ea51ac064a6fb658dbb)
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/45_01.jpg?sign=1739523045-dv7ERhus668M8A6SLpB7xyDkT1L6flUa-0-f09a381fb22d37ea5095bc9e7a88e043)
执行效果如图1-51所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/45_02.jpg?sign=1739523045-1yEFLBKTzgdPxfumRu1Psfb8y1rbUcgp-0-f34d6a6641fc4e19f5a4ed2a761e03fc)
•图1-51 执行效果
1.6.7 选择器的综合使用
如果将前面的选择器放到一起使用,这样就能将不同的标签修改为不同的样式。案例:标签、类、id、全局、属性,包含选择器的综合使用(案例文件:CSS/7.html),案例代码如下。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/45_03.jpg?sign=1739523045-rMWJy40AXZZH5EvxY7NNvUvZbHmWnqLg-0-f05cd5b3eea7e219d9db1943f75b7f02)
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/46_01.jpg?sign=1739523045-DaJbT1oq31RoItor1ra5XFnUdV9thT0E-0-cbda9c49d66d78c2f947a25bbced6654)
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/47_01.jpg?sign=1739523045-95u2qJmsftxU8EMmq3rs9qO5Sri4CYRr-0-7569e5f540a36dca9dc749a1e224654d)
执行效果如图1-52所示。
![](https://epubservercos.yuewen.com/21A8BA/28606725804710806/epubprivate/OEBPS/Images/47_02.jpg?sign=1739523045-nyx09uHoimgscWfk2tq0dUYOCrpiGdKa-0-dc8478d6516834f878a299d990c51a64)
•图1-52 执行效果