CSS Diner详解

详细CSS Diner

CSS Diner想必很多人听过，这是一个练习CSS中的选择器的不错的网站，最近在学习前端，打算好好写一下

常用英文单词：

  • plates：盘子
  • bento：盒饭、便当
  • pickle：腌黄瓜
  1. 选择盘子，类型选择器，答案：plate

第一题右边的提示是类别选择器，选择plate则会把所有plate选中(好像说了句废话)。这里强调一点，题目的plate并不是HTML/CSS的标签之类的，只是题目需要

  1. 第一题的类似，答案是bento

  1. ID选择器，右边有例子，答案是#fancy

  1. 后代选择器，答案是plate>apple或者plate apple

  1. 将后代选择器与ID选择器结合，答案是#fancy pickle

  1. class选择器，答案是.small

  1. 将类别选择器与元素选择器结合，要注意如果有元素选择器，则需将元素选择器放在前面。答案是orange.small

  1. 还是类别选择器与元素选择器结合，答案是bento orange.small

  1. 并集，答案是plate，bento

  1. 通配，答案是*

  1. 通配的应用

  1. 兄弟选择器，答案是plate + apple

  1. 也是兄弟选择器，答案是bento ~ pickle

两种兄弟选择器：

  • +表示只要一个
  • ~表示全都要

两种后代选择器：

  • 空格表示只要是后代都行
  • >表示只要第一个
  1. 后代选择器，答案是pickle > apple

  1. 伪类选择器，选择第几个后代，答案是orange:first-child

注意这题的答案不能是plate:first-child，因为首先要选中该类，然后再是该类的限制

  1. 唯一子元素，答案是apple:only-child,plate>pickle

这题我的答案比较简单，网上有更好的答案：plate>:only-child

  1. 尾元素，答案是apple:last-child,pickle:last-child

  1. 第几个子元素，答案是plate:nth-child(3)

  1. 倒数第几个元素，答案是bento:nth-last-child(3)

  1. 同样是子元素，换成了类型，这里与first-child区别开来，因为这里并不要紧接着父元素，答案是apple:first-of-type

  1. 还是子类伪元素，现在变成了偶数次，答案是plate:nth-of-type(2n)

  1. plate:nth-of-type(2n+3)

  1. 唯一，答案是apple:only-of-type

  1. 最后一种类型，答案是orange:last-of-type,apple:last-of-type

  1. 取空，答案是bento:empty

  1. 取非，答案是apple:not(.small)

  1. 属性值，答案是[for]

  1. 属性值搭配元素，答案是plate[for]

  1. 具体属性值，答案是for="Vitaly"

  1. 匹配前缀，答案是[for^="Sa"]

  1. 匹配后缀，答案是[for$="to"]

  1. 匹配中间部分，答案是[for*="obb"]

posted on 2022-01-05 01:59  lpzju  阅读(5693)  评论(0)    收藏  举报

导航