子代选择器

Posted 2020-11-06 柠檬不酸

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子代选择器相关的知识，希望对你有一定的参考价值。

子代选择器
写法：选择器>选择器{属性：值}
特点：选择的时直接下一代元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div>span{
 8             font-size: 40px;
 9             color: pink;
10         }
11         p>span{
12             color: #388881;
13             font-size: 70px;
14         }
15         
16     </style>
17 </head>
18 <body>
19     <div>
20         <p><span>项目</span></p>
21         <span>选择</span>
22 
23     </div>
24 </body>
25 </html>

1 div>span{
2             font-size: 40px;
3             color: pink;
4         }
5 与<div>
6         <span>选择</span>对应

1 p>span{
2             color: #388881;
3             font-size: 70px;
4         }
5 与<div>
6     <p><span>项目</span></p>对应

以上是关于子代选择器的主要内容，如果未能解决你的问题，请参考以下文章

03-高级选择器

CSS 选择器仅针对直接子代而不是其他相同的后代