【CSS】CSS餐厅小游戏练习1~32关的参考答案

2023-11-10

链接:CSS3餐厅练习

玩法:利用各种选择器选中抖动的物体即可通关

1.Type Selector(元素选择器)

元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}

plate

2.Type Selector(元素选择器)

bento

3.ID Selector(ID选择器)

id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}

#fancy

4.Descendant Selector(子元素选择器)

子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素

plate>apple

5.Combine the Descendant & ID Selectors(组合子元素和id选择器)

#fancy>pickle

6.Class Selector(类选择器)

类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值

.small

7.Combine the Class Selector(组合类选择器)

orange.small

8.子元素选择器和交集选择器

交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头

bento>orange.small

9.Comma Combinator(并集选择器)

选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
举例: #b1,.p1,h1,span,div.red{}

plate,bento

10.The Universal Selector(通配符选择器)

通配选择器
作用:选中页面中的所有元素
语法: *

*

11.Combine the Universal Selector(组合通配符选择器)

后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代

plate空格*

plate *

12.Adjacent Sibling Selector(兄弟选择器)

兄弟选择器
选择下一个兄弟
语法:前一个 + 下一个
举例:A+B :(使用加号)表示选择当前兄弟(A)的下一个兄弟(B)元素,以A为定位来选择B

plate+apple

13.General Sibling Selector(通用的兄弟选择器)

选择下边所有的兄弟
语法:兄 ~ 弟

bento~pickle

14.Child Selector (子元素选择器)

plate>apple

15.First Child Pseudo-selector(第一个孩子的伪选择器)

伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似,不通点是他们是在同类型元素中进行排序
-:not() 否定伪类
- 将符合条件的元素从选择器中去除

plate>orange:first-child

16.Only Child Pseudo-selector(唯一孩子伪类选择器)

plate>:only-child

17.Last Child Pseudo-selector(最后一个孩子伪类选择器)

.small:last-child

18.Nth Child Pseudo-selector(第n个孩子伪选择器)

plate:nth-child(3)

19.Nth Last Child Selector(倒数第n个孩子伪选择器)

注意:这里的:nth-last-child(n) 中的n是3,因为他不是在同类元素中排序的
:first-of-type
:last-of-type
:nth-of-type()
- 上面这些以type结尾才是在同类型元素中进行排序

bento:nth-last-child(3)

20.First of Type Selector(第一个孩子伪类选择器(在同类元素中排序的))

apple:first-of-type

21.Nth of Type Selector(第n个孩子伪类选择器(在同类元素中排序))

plate:nth-of-type(2n)
或者
plate:nth-of-type(even)

22.Nth-of-type Selector with Formula(具有公式的 n 次伪类选择器)

Tip: 自己根据规律写出An+B

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

23.Only of Type Selector(唯一孩子伪类选择器(在同类元素中排序))

apple:only-of-type

24.Last of Type Selector(最后一个孩子的伪类选择器)

.small:last-of-type

25.Empty Selector(空的伪类选择器)

bento:empty

26.Negation Pseudo-class(否定式伪类选择器)

apple:not(.small)

27.Attribute Selector(属性选择器)

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素

[for]

28.Attribute Selector(属性选择器)

plate[for]

29.Attribute Value Selector(根据属性值选择)

[for="Vitaly"]

30.Attribute Starts With Selector(属性开头选择器)

[for^="Sa"]

31.Attribute Ends With Selector(属性结尾选择器)

[for$="ato"]

32.Attribute Wildcard Selector(属性通配符选择器)

[for*="obb"]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【CSS】CSS餐厅小游戏练习1~32关的参考答案 的相关文章

  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 把整数转换成2的n次方的和数组

    为什么80 的码农都做不了架构师 gt gt gt 大概这样 125 gt 1 4 8 16 32 64 写几种实现 Ruby 2 3 1 022 gt 125 to s 2 reverse chars map with index b i
  • Github清除历史记录的方法

    GitHub历史提交记录累计到一定程度以后 就很麻烦 体积大下载不便 压缩也慢 这时候就想永久性地删除掉没什么卵用的历史commit记录 但还要保留stars forks issues tags等重要信息 因此不能删掉仓库重建一份 而要创建
  • windows10安装opencv4.5.4,搭配vs2017

    windows10安装opencv4 5 4 搭配vs2017 1 下载opencv安装包 2 安装opencv 2 设置环境变量 3 在visual studio 2017中配置opencv 3 1 创建项目 3 2 配置 VC 目录 包
  • CSMA/CD与CSMA/CA

    对照无线网络 有线网络的集线器和中继器设计中 採用了CSMA CD技术 该技术早期是用来解决有线网络中 共享介质下的多路网络接入问题 该技术仍然在当今的10M 100M半双工网络中使用 在更高的带宽情况下 比方千M网络 则採用全双工技术以取
  • 如何压缩图片大小?图片压缩到200k以下跟我学

    相信许多人在日常生活中都会遇到图片过大导致无法上传或发送的问题 这时候 如何有效地压缩图片大小就成了我们的必备技能 今天 我将为大家介绍三种方法 帮助大家轻松压缩图片大小 一般来说 我们希望在不损失太多图片质量的情况下 尽可能地减小图片的大
  • 滑动窗口系列4-Leetcode322题零钱兑换-限制张数-暴力递归到动态规划再到滑动窗口

    这个题目是Leecode322的变种 322原题如下 我们这里的变化是把硬币变成可以重复的 并且只有coins数组中给出的这么多的金币 也就是说有数量限制 package dataStructure leecode practice imp
  • 虚拟现实下的手势识别综述

    虚拟现实下的手势识别综述 目录 虚拟现实下的手势识别综述 摘要 关键词 1 引言 2 国内外研究现状 3 手势识别的关键技术 3 1手势分割 3 2手势建模 3 3手势识别 3 4特征提取 4 存在的问题及发展趋势 5 结论 参考文献 摘要
  • js list 根据id 取不重复的数据,出现重复的完全剔除

    可以使用Set数据结构来实现根据id取不重复的数据 并剔除重复的数据 假设有一个包含多个对象的数组arr 每个对象都有一个id属性 你可以按照以下步骤进行操作 创建一个空的Set对象 用于存储不重复的id 使用forEach 方法遍历数组a
  • QT入门Buttons之QPushButton

    目录 一 界面布局介绍 1 布局器中的位置及使用 2 控件的界面属性 3 常用基本属性介绍 3 1控件名称 3 2控件大小属性 3 3按钮上的文字设置 3 4设置按钮的样式 二 属性功能介绍 1 常用方法介绍 2 基本信号介绍 三 Demo
  • servlet 会话_在Servlet中管理会话

    servlet 会话 We all know that HTTP is a stateless protocol All requests and responses are independent But sometimes you ne
  • CentOS7创建新用户

    使用root账号登录 输入新增用户的命令 XXX 指定自己新增的用户名 root localhost adduser XXX 给新增的用户名设置密码 XXX 为刚才自己设置的用户名 root localhost passwd XXX 给新用
  • PHP学习线路图

    PHP学习线路图 PHP教程 PHP教程 PHP简介 PHP环境设置 PHP语法概述 PHP变量类型 PHP常量类型 PHP运算符类型 PHP 条件语句 PHP循环语句 PHP数组 PHP字符串操作 PHP Web概念 PHP的GET和PO
  • Java链表的基本使用

    链表是一种根据元素节点逻辑关系排列起来的一种数据结构 利用链表可以保存多个数据 这一点类似于数组的概念 但是数组本身有一个缺点 数组的长度固定 不可改变 在长度固定的情况下首选的肯定是数组 但是在现实的开发之中往往要保存的内容长度是不确定的
  • 2022计算机软件毕业设计大全

    springboot快递代拿系统 6630 电竞选手管理系统 SSM MySQL 6629 自习室预约网站 SSM MySQL 6626 眼镜销售系统 SSM MySQL 6620 基于Java的学生管理系统 IDEA SSM MySQL
  • Centos7 增加/修改SSH连接端口

    Centos7 增加 修改SSH连接端口 1 修改配置文件 2 如果你关闭了SELinux 可以忽略这一步 3 防火墙开放22345端口 4 重启SSH服务和防火墙 最好也重启下服务器 1 修改配置文件 vim etc ssh sshd c
  • typescript变量声明入门 泛型 interface 可索引接口 type

    最近面试了好多人 简历都写熟练使用TypeScript 可是聊下来发现声明复杂一点的变量只会any 简直就是来搞笑的 TypeScript 是 JavaScript 的超集 扩展了 JavaScript 的语法 TypeScript中为了使
  • maven setting

    Maven Phases Although hardly a comprehensive list these are the most common default lifecycle phases executed validate v
  • 【机器学习代码例】用BP神经网络做预测

    机器学习算法 源码下载链接 导入包 import numpy as np import matplotlib pyplot as plt import pandas as pd 定义激活函数 激活函数 def tanh x return n
  • jeecg boot MybatisInterceptor 的使用笔记

    目前使用的旧版本是2 0 2 更新了新版本2 2 1 sql UPDATE tablename set update time updateTimeNew where ID id and update time updateTime 使用中
  • 【CSS】CSS餐厅小游戏练习1~32关的参考答案

    链接 CSS3餐厅练习 玩法 利用各种选择器选中抖动的物体即可通关 1 Type Selector 元素选择器 元素选择器 作用 根据标签名来选中指定的元素 语法 标签名 例子 p h1 div plate 2 Type Selector