标签：分享 结合 情况 技术 blog 有序 alt 注意 元素
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;}
标签：分享 结合 情况 技术 blog 有序 alt 注意 元素
原文地址：http://www.cnblogs.com/zc168/p/7065385.html
