<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>only-child</title> <style> div:only-child { color: red; } </style> </head> <body> <div>1</div> <p>2</p> <div>3</div> <section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </section> <section> <div>2</div> </section> </body> </html>
匹配父元素下唯一子元素,也就是父元素下面只能包含一个div,包含其他任何一个元素就会失效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>only-of-type</title> <style> div:only-of-type { color: red; } </style> </head> <body> <div>1</div> <p>2</p> <div>3</div> <section> <div>1</div> <h3>2222</h3> </section> </body> </html>
匹配父元素下子元素唯一,唯一和only-child不同的是,父元素下面除了一个div外可以包含其他元素,但是div必须只能一个,有二个div也会失效
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
