练习要求
- 使用 :root 伪类定义全局CSS变量
- 使用属性选择器根据书籍分类设置不同样式
- 使用兄弟选择器控制元素间距
- 使用 :not() 伪类排除特定元素
/* 使用:root定义全局变量 */ :root { --fiction-color: #e74c3c; --science-color: #3498db; } /* 使用属性选择器 */ .book-item[data-category="fiction"] { background-color: rgba(231, 76, 60, 0.1); } /* 使用兄弟选择器 */ .book-item + .book-item { margin-top: 5px; } /* 使用:not()伪类 */ .book-item:not([data-category="fiction"]) .book-title::before { content: "📚 "; }