css样式大合集

1. 保留换行和空白符

white-space: pre-wrap; 

2. 默认值，允许文本自动换行

white-space: normal;

3. 选择第三个及之后的子元素，并设置margin-top

.item:nth-child(n+3) {
    margin-top: 20px;
}

4. 设置除了第一个子元素外的子元素的上边距

.item:not(:first-child) {
    margin-top: 20px; 
}

5. 选择第一个、第三个、第五个元素并应用样式

.item:nth-child(1),
.item:nth-child(3),
.item:nth-child(5) {
    color: #ff0000; /* 例如，设置文本颜色为红色 */
}

6. 选择奇数元素并应用样式

.item:nth-child(odd) {
    background-color: #f0f0f0; /* 例如，设置奇数项的背景颜色 */
}

7. 选择偶数元素并应用样式

.item:nth-child(even) {
    background-color: #e9e9e9; /* 例如，设置偶数项的背景颜色 */
}