选择器—文档结构

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;}

 




posted @ 2017-06-22 15:49  zc168  阅读(269)  评论(0)  编辑  收藏  举报