CSS的后代选择器基础使用示例
2021-05-08 21:10:34 基础
来看一个后代选择器的最简单写法，strong标签属于p标签的后代，i标签属于strong标签后代：
HTML代码：
XML/HTML Code复制内容到剪贴板
<p>mynameis<strong>li<i>daze</i></strong>,hahah.</p>CSS代码：
CSS Code复制内容到剪贴板
pstrong{font-size:30px;}pi{font-size:40px;}1、在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器，后代的层次间隔可以是无限的，注意与子元素选择器的区别。
示例1
XML/HTML Code复制内容到剪贴板
<html><head><styletype="text/css">ulem{color:red;font-weight:bold;}</style></head><body><ul><li>Listitem1<ol><li>Listitem1-1</li><li>Listitem1-2</li><li>Listitem1-3<ol><li>Listitem1-3-1</li><li>Listitem<em>1-3-2</em></li><li>Listitem1-3-3</li></ol></li><li>Listitem1-4</li></ol></li><li>Listitem2</li><li>Listitem3</li></ul></body></html>执行效果：
示例2
XML/HTML Code复制内容到剪贴板
<html><head><styletype="text/css">div.sidebar{width:100px;height:100px;background:blue;}div.maincontent{width:100px;height:100px;background:yellow;}div.sidebara:link{color:white;}div.maincontenta:link{color:red;}</style></head><body><divclass='sidebar'><ahref='#'>我是链接1<a/></div><divclass='maincontent'><ahref='#'>我是链接1<a/></div></body></html>执行效果
一点说明：
XML/HTML Code复制内容到剪贴板
a:link{color:#FF0000}a:visited{color:#00FF00}a:hover{color:#FF00FF}a:active{color:#0000FF} 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
最新文章
热门文章
猜你喜欢
