CSS樣式多個節點連接的用法非常實用,可以同時對多個元素應用相同的樣式。以下是一些常用的多節點選擇器:
/* 選擇所有p和span標簽 */ p, span { font-size: 16px; color: red; } /* 選擇所有ul下的li標簽 */ ul li { list-style: none; } /* 選擇id為box1和box2的元素 */ #box1, #box2 { width: 100px; height: 100px; } /* 選擇所有class為btn的元素 */ .btn { background: blue; color: white; }
除了以上的選擇器,還可以使用組合選擇器進行更復雜的選擇。以下是一些組合選擇器的例子:
/* 選擇所有class為box的子元素p */ .box > p { font-weight: bold; } /* 選擇div下的第二個p元素 */ div p:nth-of-type(2) { font-size: 18px; } /* 選擇class為box的元素后面緊跟著的兄弟元素 */ .box + p { color: green; } /* 選擇class為box的元素后面所有的兄弟p元素 */ .box ~ p { text-transform: uppercase; }
以上就是一些CSS樣式多個節點連接的例子。使用這些選擇器可以讓我們更方便地對頁面元素進行樣式設置,從而提高開發效率。