HTML層次選擇器是一種簡單但功能強大的CSS選擇器，它可以讓開發者通過HTML文檔結構的層次關系，快速而精確地選擇目標元素。

/* 選擇父元素下的所有子元素 */
.parent >* {
/* your styles here */
}
/* 選擇某個元素的第一個直接子元素 */
.element:first-child {
/* your styles here */
}
/* 選擇某個元素的最后一個直接子元素 */
.element:last-child {
/* your styles here */
}
/* 選擇某個元素的某個特定位置的直接子元素 */
.element:nth-child(n) {
/* your styles here */
}
/* 選擇某個元素的某個特定位置的直接兄弟元素 */
.element + .sibling {
/* your styles here */
}
/* 選擇某個元素后面所有的直接兄弟元素 */
.element ~ .sibling {
/* your styles here */
}
/* 選擇某個元素的所有祖先元素 */
.element ancestors {
/* your styles here */
}
/* 選擇具有某些屬性的元素 */
[element="value"] {
/* your styles here */
}
/* 選擇不具有某些屬性的元素 */
[element!="value"] {
/* your styles here */
}
/* 選擇具有某些屬性值的元素 */
[element^="value"] {
/* your styles here */
}
/* 選擇以某些屬性值結尾的元素 */
[element$="value"] {
/* your styles here */
}
/* 選擇包含某些屬性值的元素 */
[element*="value"] {
/* your styles here */
}

以上就是常用的HTML層次選擇器代碼，如果您在CSS中需要根據HTML文檔的層次關系去選擇元素，那么HTML層次選擇器是您必須掌握的技巧之一。