选择器—文档结构
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择器—文档结构相关的知识，希望对你有一定的参考价值。
1、结构文档中有2种关系，父子关系或祖先-后代关系；父子关系是一种特殊的祖先-后代关系。
2、语法结构如下：
祖先 后代{ 属性名：属性值}
祖先 后代之间间隔一代的父子关系，也可以是间隔很多代的祖先后代关系
1 ul ol{ 2 color:red; 3 } 4 ul ul{ 5 color:blue; 6 } 7 <ul> 8 <li>aa</li> 9 <ol> 10 <li>bb</li> 11 <ul> 12 <li>cc</li> 13 </ul> 14 </ol> 15 </ul>
也可以是更复杂的关系：ul ol ul li { color : blue ; }
也可以与分组选择器结合：ul li , ol li { color : red ; }
3、选择子元素
使用大于符号 > 来连接父子元素，注意该方法仅能连接父子元素
1 ul > li{ 2 color:red; 3 } 4 <ul> 5 <li>aa</li> 6 <ol> 7 <li>bb</li> 8 </ol> 9 10 </ul>
也可以后代选择器和子选择器结合使用
1 ul ul > li{ 2 color:red; 3 } 4 <ul> 5 <li>aa</li> 6 <ol> 7 <li>bb</li> 8 <ul> 9 <li>cc</li> 10 </ul> 11 </ol> 12 </ul>
4、选择相邻兄弟元素
此种情况适用于：所有子元素拥有相同的父元素，则可以对亲兄弟姐妹进行组合匹配设置，但是第一个元素不生效
1 li+li{ 2 color:red; 3 } 4 5 <div> 6 <ul> 7 <li>a</li> 8 <li>b</li> 9 <li>c</li> 10 </ul>
也可以和后代元素进行组合使用
1 ol li+li{ 2 color:red; 3 } 4 </style> 5 </head> 6 <body> 7 <div> 8 <ul> 9 <li>a</li> 10 <li>b</li> 11 <li>c</li> 12 </ul> 13 <ol> 14 <li>a</li> 15 <li>b</li> 16 <li>c</li> 17 </ol>
如果想以上有序序列里面的a b c全部为红色，可以选择如下的方式：ul+ol{color:red;}
以上是关于选择器—文档结构的主要内容，如果未能解决你的问题，请参考以下文章
14.VisualVM使用详解15.VisualVM堆查看器使用的内存不足19.class文件--文件结构--魔数20.文件结构--常量池21.文件结构访问标志（2个字节）22.类加载机制概(代码片段