[分享]css关系选择器习题

在使用CSS样式表时，选择器是其中最重要的部分之一。而在选择器中，关系选择器也是非常常用的一种类型。那么我们就来看一下一些关系选择器的练习题吧。/ 1. 选择所有后代元素 / div p { colo...

在使用CSS样式表时，选择器是其中最重要的部分之一。而在选择器中，关系选择器也是非常常用的一种类型。那么我们就来看一下一些关系选择器的练习题吧。

/* 1. 选择所有后代元素 */
div p {
  color: red;
}

/* 2. 选择紧接着div之后的p元素 */
div + p {
  font-size: 18px;
}

/* 3. 选择div之后所有的p元素 */
div ~ p {
  line-height: 1.6em;
}

/* 4. 选择ul元素中的第一个li元素 */
ul li:first-child {
  font-weight: bold;
}

/* 5. 选择ul元素中的最后一个li元素 */
ul li:last-child {
  text-decoration: underline;
}

/* 6. 选择ul元素中的第二个li元素 */
ul li:nth-child(2) {
  background-color: #ddd;
}

/* 7. 选择ul元素中的偶数li元素 */
ul li:nth-child(even) {
  color: blue;
}

/* 8. 选择ul元素中的奇数li元素 */
ul li:nth-child(odd) {
  color: green;
}

/* 9. 选择ul元素中的3~5个li元素 */
ul li:nth-child(n+3):nth-child(-n+5) {
  opacity: 0.8;
}

/* 10. 选择div元素中的第一个p元素 */
div p:first-of-type {
  font-style: italic;
}

/* 11. 选择div元素中的最后一个p元素 */
div p:last-of-type {
  text-decoration: line-through;
}

/* 12. 选择div元素中的第二个p元素 */
div p:nth-of-type(2) {
  font-family: Arial;
} 

以上就是12个CSS关系选择器的练习，每一种选择器都有不同的应用场景，掌握它们可以更好的优化CSS样式表编写。希望大家都能够多加练习，熟能生巧。