css 后代选择器多级嵌套
.div div div 嵌套会先首先寻找.div的所有后代div元素的dom 然后再在此dom基础上继续寻找他的后代div dom 依次类推
a.(这样的css选择会出现大量重复,后面的dom属性会覆盖前面的属性)
b. 根元素一定要固定好 倘若写的是 div div div 第一个div会把页面里所有div遍历出来 一一作为查询根元素
c 虽然多嵌套了几层 但是可以完全解决css命名重复的问题
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>层级选择器</title> <style> body{ border: 2px solid red; margin: 0; padding: 0; width:300px; } div{ border: 3px solid yellow; margin: 5px; padding: 5px; } div div{ background: pink; } div div div{ background: white; } </style> </head> <body> <div>1 <div>2 <div>3</div> <div><div>9</div></div> </div> <div>4</div> <div>5 <div>6</div> </div> <div> <div> <div></div> </div> </div> </div> </body> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>层级选择器</title> <style> body{ border: 2px solid red; margin: 0; padding: 0; width:300px; } div{ border: 3px solid yellow; margin: 5px; padding: 5px; } .div div div{ background: pink; } .div > div > div{ background: white; } </style> </head> <body> <div class="div">1 <div>2 <div>3</div> <div><div>9</div></div> </div> <div>4</div> <div>5 <div>6</div> </div> <div> <div> <div></div> </div> </div> </div> </body> </html>