CSS Diner详解

2022/1/5 6:05:05

本文主要是介绍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"]



这篇关于CSS Diner详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程