CSS选择器详解-优快云博客

本文详细介绍了CSS中各种选择器的应用，包括标签、ID与类选择器等，并通过具体实例展示了不同选择器如何作用于HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用css

 1 /*标签选择器，页面中的所有p标签都会使用该样式*/
 2         p{
 3             color:#f00;
 4         }
 5         /*ID选择器，此时会对所有的id为p2的标签进行样式的设置,用#id表示*/
 7         #p2 {
 8             font-weight:bold;
 9             text-decoration:underline;
10         }
11         /*p.p1表示class为p1的p标签，类选择器*/
12         p.p1 {
13             color:#54a;
14             font-size:16px;
15         }
16 
17         p.p2 {
18             color:#998733;
19         }
20         /*包含选择符，指的是p标签中的所有span标签都来设置这个信息*/
21         p span{
22             background:#000;
23             font-weight:bold;
24         }
25         /*包含选择符会包含div标签中的所有span包括是子标签中的span*/
26         div span {
27             background:#0ff;
28         }
29 
30         /*子对象选择符*/
31         div > h2 {
32             color:#00f;
33             background:#ff0;
34         }
35         /*子对象选择符，仅仅只针对div标签的第一级子对象*/
36         div>span {
37             background:#f0f;
38         }
39         /*分组选择符,以下表示所有的id为d1或者p2的标签都使用
40         该样式*/
41         #d1,#p2 {
42             font-size:19px;
43             background:#999;
44         }

对应html

 1 <body>
 2         <div id="d1">
 3         Apache Whisker <h5>allows an application to models the licensing characteristics of the contents of its distributions. <span>Use cases are auditing the model</span> against</h5> the contents of a distribution, reporting on the <h2>contents of a distribution</h2> and generation licensing documents <span>(LICENSE, NOTICE and so on)</span> for a distribution. Whisker distributes tooling for the command line and build system such as Maven.
 4         
 5         </div>
 6         <p class="p1">
 7             Apache Whisker allows an application to models the licensing characteristics of the contents of its distributions. <span>Use cases are auditing the model</span> against the contents of a distribution, reporting on the contents of a distribution and generation licensing documents (LICENSE, NOTICE and so on) for a distribution. Whisker distributes tooling for the command line and build system such as Maven.
 8         </p>
 9         <p id="p2">
10         NSF-seeded Open Source software <span>framework used for executing and managing</span> small to large-scale applications and workflows across local resources, computational grids, and the Cloud.
11         </p>
12         
13         <p class="p2">
14         The Apache POI team is pleased to announce the release of POI 3.9. Featured are significant performance improvements and numerous bug fixes.
15         The Apache POI Project's mission is to create and maintain Java APIs for manipulating various file formats based upon the Office Open XML standards (OOXML) and Microsoft's...
16         </p>
17 
18         <p class="p2">
19         MyFaces Core is a JavaServer(tm) Faces 2.1 implementation as specified by JSR-314. MyFaces Core has passed Sun's JSR-314 TCK and is 100% compliant with the JSR-314 specification.
20         </p>
21         <p class="p1">
22         MyFaces Core is a JavaServer(tm) Faces 2.0 implementation as specified by JSR-314. MyFaces Core has passed Sun's JSR-314 TCK and is 100% compliant with the JSR-314 specification.
23         </p>
24     </body>