css - 01結構偽類選擇器
阿新 • • 發佈：2022-04-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CssBase</title> <link rel="stylesheet" href="lesson.css" type="text/css"> <style> /*結構選擇器從前往後，偽類選擇器從後往前*/ /*article元素的後代中只有一個span元素*/ /*article span:only-child {*/ /* color: red;*/ /*}*/ /*article元素的後代中只有一個span型別元素*/ /*article span:only-of-type {*/ /* color: red;*/ /*}*/ /*article元素的後代中第2個是span元素*/ /*article span:nth-child(2) {*/ /* color: red;*/ /*}*/ </style> </head> <body> <!--article元素的後代中只有一個span元素--> <!--<article>--> <!-- <span>houdunren.com</span>--> <!-- <aside>--> <!-- <span>houdunwang.com</span>--> <!-- </aside>--> <!-- <strong>hdcms.com</strong>--> <!--</article>--> <!--article元素的後代中只有一個span型別元素--> <!--<article>--> <!-- <span>houdunren.com</span>--> <!-- <aside>--> <!-- <span>houdunwang.com</span>--> <!-- </aside>--> <!-- <strong>hdcms.com</strong>--> <!--</article>--> <!--article元素的後代中第2個是span元素--> <!--<article>--> <!-- <span>houdunren.com</span>--> <!-- <aside>--> <!-- <span>houdunwang.com</span>--> <!-- <span>hdcms.com</span>--> <!-- </aside>--> <!-- <span>hdphp.com</span>--> <!--</article>--> </body> </html>