7.层次选择器
1.后代选择器: 在某个元素的后面: 祖爷爷 | 爷爷 爸爸 你 （全都亮） eg: body p{ } 2.子选择器: （儿子亮） eg: body>p{ } 3.相邻兄弟选择器： (下一行亮) .类名+(p){ } 4.通用选择器: (向下的所有兄弟元素) .类名~(p){ }
7.1后代选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 后代选择器: body p{ background: #60d01b; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html>
7.2子选择器: 一代
<style> body>p{ background: #60d01b; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body>p{ background: #60d01b; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html>
7.3兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active+p{ background: red; } </style> </head> <body> <p>0</p> <p class="active">1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html>
7.4通用选择器
8.结构伪类选择器
1.选择指定的第一个和最后一个。 <style> /*<!-- ul的第一个元素-->*/ ul li:first-child{ background: #1616aa; } ul li:last-child{ background: #0cd28e; } /* ul最后一个元素*/ </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*<!-- ul的第一个元素-->*/ ul li:first-child{ background: #1616aa; } ul li:last-child{ background: #0cd28e; } /* ul最后一个元素*/ </style> </head> <body> <p>0</p> <p >1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> <p>7</p> <p>8</p> <p>9</p> </body> </html>
1.选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素(p)才生效。 p:nth-child(2){ background: #c12075; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:nth-child(2){ background: #c12075; } </style> </head> <body> <p>0</p> <p >1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> <p>7</p> <p>8</p> <p>9</p> </body> </html>
选中父元素下的p元素的第二个. • 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:nth-of-type(2){ background: #c7771c; } </style> </head> <body> <p>0</p> <p >1</p> <p>2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> <p>7</p> <p>8</p> <p>9</p> </body> </html>
8.1伪类特效
1.随着鼠标的移动，他会有残影（悬浮） <style> p:hover{ background: aliceblue; } </style> 2.
