在CSS領域有許多冷知識，今天為大家介紹CSS世界十大冷知識！

一、CSS沒有“父元素選擇器”：

/* 錯誤寫法 */
.parent .child {
background-color: red;
}
/* 正確寫法 */
.parent-child .child {
background-color: red;
}

二、在表格中，使用border-collapse：collapse時，td元素的padding會被忽略：

table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid black;
}

三、CSS中最小的渲染單位是物理像素（px），而不是CSS像素：

div {
width: 100px;
}
/* 實際渲染的可能并不是100個CSS像素 */

四、CSS中設置z-index值的元素必須滿足position屬性不為static：

/* 錯誤寫法 */
.box {
z-index: 2;
}
/* 正確寫法 */
.box {
position: relative;
z-index: 2;
}

五、CSS中所有類型選擇器、類選擇器和id選擇器的優先級都相同：

/* 這里的優先級相同，不考慮具體元素、偽類等 */
h1 {}
.header {}
#header {}

六、CSS中可以使用empty元素選擇器選擇沒有任何子元素的元素：

div:empty {
background-color: red;
}

七、CSS中部分屬性的值可以為函數，如calc()、var()等：

width: calc(100% - 20px);
color: var(--main-color);

八、CSS中可拖拽元素的屬性draggle可以直接設置為true，而不用必須設置為draggable="true"：

.box {
draggle: true;
}

九、CSS3中支持通過RGBA方法來設置顏色值：

color: rgba(255, 255, 255, 0.8);

十、CSS中使用偽元素before和after可以在元素的前后插入內容：

div::before {
content: "前置內容";
}
div::after {
content: "后置內容";
}