<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .wrap li:nth-child(1){ 找到wrap底下所有子元素，并且选中第一个子元素，并且子元素必须是li color: #BBFFAA; } .wrap p:nth-of-type(1){ 找到wrap下所有子元素，并且选中第一个p color:red; } */ /* :first-child{ border: 1px solid ; } :last-child{ border: 1px solid; } */ /* .wrap_s :only-child{ border: 1px solid; } */ /* :first-of-type{ border: 1px solid; } */ :only-of-type{ border: 1px solid; } </style> </head> <body> <div class="div"> <!-- <ul class="wrap"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> --> <!-- <p>p</p> --> <!-- </ul> --> <ul class="wrap_s"> <!-- <p>p</p> --> <!-- <p>1</p> --> <!-- <li>2</li> --> <p>p</p> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> </body> </html>
/* .wrap li:nth-child(1){
找到wrap底下所有子元素，并且选中第一个子元素，并且子元素必须是li
color: #BBFFAA;
}
.wrap p:nth-of-type(1){
找到wrap下所有子元素，并且选中第一个p
color:red;
child是所有类型子元素；type是当前类型子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .wrap .inner:nth-child(1){ border: 1px solid; } */ /*以元素为中心*/ /* .wrap .inner:nth-of-type(1){ border: 1px solid; } */ </style> </head> <body> <div class="wrap"> <div class="inner">div</div> <p class="inner">p</p> <span class="inner">span</span> <h1 class="inner">h1</h1> <h2 class="inner">h2</h2> </div> </body> </html>
type以元素为中心