Day14_学点CSS_高级选择器Demo

/* 定义基本样式 */
.demo-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
 
.demo-box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  margin: 10px;
  line-height: 200px;
  font-size: 20px;
  color: #333;
  position: relative;
  cursor: pointer;
  user-select: none;
}
 
/* 定义交互样式 */
.demo-box:hover {
  background-color: #e0e0e0;
}
 
/* 使用子选择器选中特定子元素 */
.demo-box:first-child {
  background-color: #ffcccc;
}
 
/* 使用相邻兄弟选择器选中紧跟在另一个元素后的元素 */
.demo-box + .demo-box {
  background-color: #ccffcc;
}
 
/* 使用通用兄弟选择器选中同级所有兄弟元素 */
.demo-box ~ .demo-box {
  background-color: #ccccff;
}

这段代码定义了一个简单的CSS样式，用于演示CSS中的子选择器、相邻兄弟选择器和通用兄弟选择器。它为页面上的.demo-box元素设置了基本样式，并根据它们在DOM中的位置或与其他.demo-box元素的关系，应用不同的交互样式。这有助于理解和应用更复杂选择器的概念。