温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中如何使用后代选择器

发布时间:2021-06-25 15:56:51 来源:亿速云 阅读:165 作者:Leah 栏目:web开发

本篇文章为大家展示了CSS中如何使用后代选择器,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

基础
来看一个后代选择器的最简单写法,strong标签属于p标签的后代,i标签属于strong标签后代:
HTML代码:

XML/HTML Code复制内容到剪贴板

  1. <p>  

  2.     my name is <strong>li<i>daze</i></strong>, hahah.   

  3. </p>  

CSS代码:

CSS Code复制内容到剪贴板

  1. p strong {   

  2.     font-size30px;   

  3. }   

  4. p i {   

  5.     font-size40px;   

  6. }  

1、在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器,后代的层次间隔可以是无限的,注意与子元素选择器的区别。

示例1

XML/HTML Code复制内容到剪贴板

  1. <html>     

  2. <head>     

  3. <style type="text/css">     

  4. ul em {color:red; font-weight:bold;}     

  5. </style>     

  6. </head>     

  7.      

  8. <body>     

  9. <ul>     

  10.   <li>List item 1     

  11.     <ol>     

  12.       <li>List item 1-1</li>     

  13.       <li>List item 1-2</li>     

  14.       <li>List item 1-3     

  15.         <ol>     

  16.           <li>List item 1-3-1</li>     

  17.           <li>List item <em>1-3-2</em></li>     

  18.           <li>List item 1-3-3</li>     

  19.         </ol>     

  20.       </li>     

  21.       <li>List item 1-4</li>     

  22.     </ol>     

  23.   </li>     

  24.   <li>List item 2</li>     

  25.   <li>List item 3</li>     

  26. </ul>     

  27. </body>     

  28. </html>    

执行效果:
CSS中如何使用后代选择器

示例2

XML/HTML Code复制内容到剪贴板

  1. <html>     

  2. <head>     

  3. <style type="text/css">     

  4. div.sidebar {width:100px;height:100px;background:blue;}     

  5. div.maincontent {width:100px;height:100px;background:yellow;}     

  6.      

  7. div.sidebar a:link {color:white;}     

  8. div.maincontent a:link {color:red;}     

  9. </style>     

  10. </head>     

  11. <body>     

  12. <div class='sidebar'>     

  13. <a href ='#'>我是链接1<a/>     

  14. </div>     

  15.      

  16. <div class='maincontent'>     

  17. <a href ='#'>我是链接1<a/>     

  18. </div>     

  19. </body>     

  20. </html>    

执行效果
CSS中如何使用后代选择器

一点说明:

XML/HTML Code复制内容到剪贴板

  1. a:link {color: #FF0000}         /* 未访问的链接 */     

  2. a:visited {color: #00FF00}  /* 已访问的链接 */     

  3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */     

  4. a:active {color: #0000FF}   /* 选定的链接 */    

上述内容就是CSS中如何使用后代选择器,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI