CSS中的關系運算（Combinators）是指通過不同的符號將選擇器連接起來，表示不同元素之間的關系。關系運算包括“后代選擇器”、“子選擇器”、“相鄰兄弟選擇器”和“通用兄弟選擇器”四種，每種運算都有不同的應用場景。

// 后代選擇器
.parent-descendant {
margin: 0;
padding: 0;
}
.parent-descendant p {
color: red;
font-size: 16px;
}

后代選擇器（Descendant selector）是指通過空格將兩個選擇器連接起來，可以選擇指定元素內的所有后代元素。在代碼中，父元素選擇器與子元素選擇器之間使用空格隔開。這個選擇器非常實用，可以極大地提高 HTML 標記文檔的可讀性和可維護性。但是，也要注意使用時要避免選擇過度，造成性能問題。

// 子選擇器
.parent >.child {
margin: 0;
padding: 0;
border: 1px solid black;
}

子選擇器（Child selector）是指通過“>”將兩個選擇器連接起來，可以選擇指定元素的直接子元素。父元素選擇器與子元素選擇器之間使用“>”符號隔開。這個選擇器非常實用，在處理大型網站的樣式表時，可以僅僅找到某個元素下的直接子元素，而忽略孫子元素等其他元素的影響。

// 相鄰兄弟選擇器
.element + .next-element {
display: inline-block;
}

相鄰兄弟選擇器（Adjacent sibling selector）是指使用“+”符號將兩個選擇器連接起來，可以選擇緊接在另一個元素后面的元素。這個選擇器非常實用，在處理網頁中的某些詳細排版時，可以僅僅選擇某個元素之后的兄弟元素。

// 通用兄弟選擇器
.first-element ~ .any-element {
font-style: italic;
}

通用兄弟選擇器（General sibling selector）是指使用“~”符號將兩個選擇器連接起來，可以選擇與前面某個元素在同一級別的所有兄弟元素。這個選擇器非常實用，在處理某些網頁效果時，可以僅僅選擇跟某個元素同級別的兄弟元素，而不必遍歷整個文檔。