css-diner

发表于2023-03-11|更新于2026-02-24

|浏览量:

即使是最神圣的友谊里也可能潜藏着秘密，但是你不可以因为不能猜测出朋友的秘密而误解了他——贝多芬

分享一个网站css-diner

https://flukeout.github.io/

其能够让你通过益智的方式学习css选择器

例如此处两个盘子，对应的标签为plate，鼠标移动上去还有高亮，我们需要选中所有的盘子则使用plate标签选择器

源码地址：https://github.com/flukeout/css-diner

相关推荐

将图片转换为像素风svg

千秋青史难欺。——张廷玉链接：https://codepen.io/rodzyk/pen/dyjzExz 效果如下：需要下载对应的svg也很简单复制出来，再粘贴到本地新建xxx.svg文件内即可

多数人在心底蔑视德，但很少有人轻视荣誉。——沃夫拿格分享一个vue的组合式api封装库vueuse github：https://github.com/vueuse/vueuse 官档：https://vueuse.org/ 大致用法： 12345678910111213141516171819202122import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorag...

js当前函数获取调用它的函数

教育本质是一棵树摇动另一棵树，一朵云推动另一朵云，一个灵魂唤醒另一个灵魂。——雅斯贝尔斯转载，原文当我们在调试的时候，想获取这个函数被哪个函数调用，以方便调试，但是 caller属性被严格模式下被禁用了我们可以通过 (new Error()).stack.split(“\n”)[2].trim().split(“ “)[1]方法来获取调用当前函数的那个函数名解释：new Error().stack 表示程序出错位置的栈，[0]表示当前函数，[1]表示上一级函数调用的函数 [2]上上级…. 例子： 123function bb(){cc()} function cc(){console.log((new Error()).stack.split("\n")[2].trim().split(" ")[1])} bb() //打印出bb

浅水是喧哗的，深水是沉默的。——雪莱我们知道CSS中一些属性会被继承：给父节点设置样式，子节点也会生效例如color、font-size之类的但像widths, margins, padding, 和 borders 不会被继承，如果被继承，设想一下，给父节点加了一个border，里面的每个子孙元素都有一个border，这不是我们通常想要的效果如何来控制这些属性呢？ CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。 inherit 设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”. initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。 unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样这里有一个简单的demo： 12345678910111213141516171819202122232425262728293031<div> <h2> ...

死亡，就是你加上这个世界，再减去你。——卡尔维诺分享一个好玩的开源项目，演示地址： https://lab.hakim.se/fokus/ 代码仓库：https://github.com/hakimel/Fokus 演示效果：当我们在页面上框选时，会在页面上加个蒙版，高亮框选区域使用方式，首先下载fokus.min.js 官方链接备用链接然后引用 1<script src="/js/fokus.min.js"></script> 最后编写代码(随便写点) 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont...

js打字机动画效果实现

坦白使人心地轻松的妙药。——西塞罗实现打字机效果 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中