CSS的后代选择器基础如何使用示例

网络
即使没有人为你鼓掌，也要优雅的谢幕，感谢自己的认真付出。我们未来都是巨星，别人信不信无所谓，我们自己必须坚信！

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

XML/HTML Code复制内容到剪贴板
  1. <p>
  2. mynameis<strong>li<i>daze</i></strong>,hahah.
  3. </p>

CSS代码：

CSS Code复制内容到剪贴板
  1. pstrong{
  2. font-size:30px;
  3. }
  4. pi{
  5. font-size:40px;
  6. }

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

示例1

XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <head>
  3. <styletype="text/css">
  4. ulem{color:red;font-weight:bold;}
  5. </style>
  6. </head>
  8. <body>
  9. <ul>
  10. <li>Listitem1
  11. <ol>
  12. <li>Listitem1-1</li>
  13. <li>Listitem1-2</li>
  14. <li>Listitem1-3
  15. <ol>
  16. <li>Listitem1-3-1</li>
  17. <li>Listitem<em>1-3-2</em></li>
  18. <li>Listitem1-3-3</li>
  19. </ol>
  20. </li>
  21. <li>Listitem1-4</li>
  22. </ol>
  23. </li>
  24. <li>Listitem2</li>
  25. <li>Listitem3</li>
  26. </ul>
  27. </body>
  28. </html>

执行效果：

示例2

XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <head>
  3. <styletype="text/css">
  4. div.sidebar{width:100px;height:100px;background:blue;}
  5. div.maincontent{width:100px;height:100px;background:yellow;}
  7. div.sidebara:link{color:white;}
  8. div.maincontenta:link{color:red;}
  9. </style>
  10. </head>
  11. <body>
  12. <divclass='sidebar'>
  13. <arel="nofollow noopener noreferrer" href='#'>我是链接1<a/>
  14. </div>
  16. <divclass='maincontent'>
  17. <arel="nofollow noopener noreferrer" href='#'>我是链接1<a/>
  18. </div>
  19. </body>
  20. </html>

执行效果

一点说明：

XML/HTML Code复制内容到剪贴板
  1. a:link{color:#FF0000}/*未访问的链接*/
  2. a:visited{color:#00FF00}/*已访问的链接*/
  3. a:hover{color:#FF00FF}/*鼠标移动到链接上*/
  4. a:active{color:#0000FF}/*选定的链接*/

到此这篇关于CSS的后代选择器基础如何使用示例就介绍到这了。不怕学问浅，就怕志气短。更多相关CSS的后代选择器基础如何使用示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例