一个复杂的 CSS 选择器

时间:2024-11-17 08:08:38
  • #zeus:选择 ID 为 zeus 的元素。
  • > div:选择 #zeus 的直接子元素中的第一个 div 元素。
  • > div:选择上一个 div 的直接子元素中的第一个 div 元素。
  • > div.right-container:选择上一个 div 的直接子元素中类名为 right-containerdiv 元素。
  • > div.right-bottom-container:选择 .right-container 的直接子元素中类名为 right-bottom-containerdiv 元素。
  • > div.order-detail-drawer.open:选择 .right-bottom-container 的直接子元素中类名为 order-detail-drawer 且具有 open 类的 div 元素。
  • > div:选择 .order-detail-drawer.open 的直接子元素中的第一个 div 元素。
  • > div:选择上一个 div 的直接子元素中的第一个 div 元素。
  • > div.ticket-detail:选择上一个 div 的直接子元素中类名为 ticket-detaildiv 元素。
  • main:选择 .ticket-detail 的同级元素中的第一个 main 元素。
  • > div.detail-left.left:选择 main 的直接子元素中类名为 detail-left 且具有 left 类的 div 元素。
  • > div.detail-content:选择 .detail-left.left 的直接子元素中类名为 detail-contentdiv 元素。
  • > div:nth-child(2):选择 .detail-content 的第二个子元素。
  • > div.basics-info:选择上一个元素的直接子元素中类名为 basics-infodiv 元素。
  • > div.user-info-container:选择 .basics-info 的直接子元素中类名为 user-info-containerdiv 元素。
  • > div:选择 .user-info-container 的直接子元素中的第一个 div 元素。
  • > div.chat-user-info.order-user-info:选择上一个 div 的直接子元素中类名为 chat-user-info 且具有 order-user-info 类的 div 元素。
  • > div:选择 .chat-user-info.order-user-info 的直接子元素中的第一个 div 元素。
  • > div:nth-child(1):选择上一个 div 的第一个子元素。
  • > div.info-item-group:选择上一个元素的直接子元素中类名为 info-item-groupdiv 元素。
  • > div:nth-child(3):选择 .info-item-group 的第三个子元素。
  • > div:nth-child(2):选择上一个元素的第二个子元素。
  • > div:选择上一个 div 的直接子元素中的第一个 div 元素。