<!-- 1. 后代选择器： 包括两个或多个用空格分隔的选择器 外层标记 内层标记 --> <!-- 内层的标记为外层标记的后代 --> <!-- h1 em{color:red;} --> <!-- h1作为父元素，其中包含所有em元素均为红色 --> <!-- 2. 子代选择器：只选择某元素的子元素的元素 h1>strong{color:red} 选择作为h1元素的子元素直接的后代的所有strong元素中的内容 --> <!-- 3.相邻兄弟选择器：选择相邻的元素，二者有相同的父元素 h1 + p{font-weight:bold;} --> <!-- 4. 交集选择器：标记与类选择器组合 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style type="text/css"> /*后代选择器*/ /*h1所有的后代元素中的em*/ h1 em{color:red;} /* h1作为父元素，其中包含所有em元素均为红色 */ /*子代选择器*/ /*h1中的直接后代子元素strong中的内容*/ h1>strong{ color: #ccc; } /*相邻兄弟选择器*/ h1+p{ font-weight:bold; } /*紧跟在h1后面d的h1*/ /*其父元素为body*/ /*相邻兄弟选择器*/ p+p{ color: red; } /*紧跟在p后面的p元素*/ /*交集选择器*/ p.commont{ color: rgb(138,240,255); } /*后代选择器*/ ul em{ color: blue; } /*后代选择器*/ li em{ color: yellow; } /*直接子代选择器*/ h1+h1{ color: green; } /*紧跟在h1后面的h1元素*/ /*子代选择器*/ ol+li{ color: pink; font-weight: blod; } </style> </head> <body> <h1>this is very <em>very</em> important</h1> <p>第一段落</p> <p>第一段落</p> <p>第一段落</p> <p class="commont">第一段落</p> <h1>this is very <strong>very</strong> important</h1> <h1>this is very <i><strong>very</strong></i> important</h1> <ul> <li>list item 1 <ol> <li>list item 1-1</li> <li>list item 1-2</li> <li><em>list item 1-3</em> <ol> <li>list item 1-3-1</li> <li>list item 1-3-2</li> </ol> <li>list item 1-4</li> </ol> </li> <li>list item 2 <ol> <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3 <ol> <li>list item 2-3-1</li> <li>list item 2-3-2</li> </ol> <li>list item 2-4</li> </ol> </li> </ul> </body> </html>
