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;}
时间： 2024-10-11 20:41:13