css中的&
发表于|更新于
|浏览量:
要在座的人都停止了说话的时候,有了机会,方才可以谦逊地把问题提出,向人学习。—— 约翰·洛克
今天看到一种css写法:
1 | /deep/ .message-list { |
/deep/我们之前博客提过了,嵌套写法很简单,今天聊聊&这个父选择器
sass中文文档提到了这个父选择器
上方的&-text其实就表示.message-item-text
1 | .message-item { |
编译后为:
1 | .message-item { |
相关推荐
2021-12-02
uniapp播放音频
人们不太看重自己的力量——这就是他们软弱的原因。——高尔基 播放音频的代码很简单: 123const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/img/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); 官方文档: https://uniapp.dcloud.io/api/media/audio-context 除了播放、暂停、停止等也都能实现 完整代码: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<template> <view class=...
2025-10-15
jekyll-theme-chirpy
窥天地之奥而达造化之极——李时珍 https://github.com/cotes2020/jekyll-theme-chirpy Chirpy:技术写作的极致优雅——Jekyll 最受欢迎的极简响应式主题如果你是技术极客、程序员、运维、独立开发者,或是任何热爱写作和分享的人,相信你一定会关注“博客体验”这件小事。你想要页面清爽、内容聚焦、功能强大、移动端友好、上手成本低?那么,Chirpy 绝对值得你深入体验! 一、项目简介 项目地址:cotes2020/jekyll-theme-chirpy 演示站点:https://chirpy.cotes.page 一句话描述:A minimal, responsive, and feature-rich Jekyll theme for technical writing. 主语言:HTML(基于 Jekyll,支持 RubyGems) Star:9310+ Fork:7041+ 开源协议:MIT 标签:jekyll jekyll-theme responsive-web-design html5 bootstrap p...
2020-08-25
简单CSS实现图片旋转
图片旋转~ 代码 12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; height: auto; margin: 20% auto; animation: myrotate 3s linear infinite...
2024-05-19
js解析JWT
懂得生命真谛的人,可以使短促的生命延长。——西塞罗 代码如下: 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 当我在解析 jwt 的 token 时,发现 token 中附带的用户 id 存在精度丢失问题,然后用正则改进解析 JWT 的代码: 1const tokenParse = token => token.split(".").slice(0, 2).map(i => JSON.parse(atob(i).replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => Math.abs(p1) > Number.MAX_SAFE_INTEGER ? `:"${p1}"` : `:${p1}`))); 但是还存在 base64 解码时无法正确解码中文问题,继续改进 1const tok...
2022-11-16
mix-blend-mode
为爱情赌气,就丧心病狂了!——塞万提斯 分享一个好玩的css属性: mix-blend-mode,MDN 该属性可以将元素和后面的背景进行混合 什么叫混合呢?例如我看到的一个网站: 红框框出来的部分,是鼠标移动上去的一个效果 这个小圈,与后面的图片进行了反色,而且对于不少图片都有类似效果,我一开始以为是用了两张图片做的处理 后来发现并不是,是用的这个css 1mix-blend-mode: exclusion; 其提供的不只是反色一个选项,还有很多的值,都可以使用
2025-04-06
outline
只回忆过去是差劲的记忆。——卡罗尔 https://github.com/outline/outline https://www.getoutline.com/ Outline: 一个现代化的团队知识库项目概述Outline 是一个快速、协作的知识库,旨在帮助团队更高效地管理和分享知识。它基于 React 和 Node.js 构建,提供了一个现代化的界面和丰富的功能,支持团队内部的文档管理和协作。 关键功能 协作编辑:支持多用户同时编辑文档,实时同步变化。 文档嵌入:支持嵌入各种类型的媒体,如图片、视频、代码片段等。 版本控制:每次文档修改都会自动保存新版本,方便用户查看和恢复历史版本。 全文搜索:强大的全文搜索功能,快速定位所需文档内容。 权限管理:灵活的权限管理系统,确保文档安全。 项目活动最近发布最新发布的版本是 v0.82.0,包括以下主要改进: 提到文档时自动保持标题和图标同步。 编辑器嵌入内容现在可以垂直调整大小。 粘贴链接时有嵌入或链接的选项。 升级 Mermaid 图表到 v11。 粘贴远程图片时会自动上传到 Outline 存储。 新表格现在具有固定宽度...
