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: "后置内容";
}