解决小程序不支持各行变色伪元素选择器

最新推荐文章于 2023-04-28 17:04:00 发布
最新推荐文章于 2023-04-28 17:04:00 发布
阅读量486 收藏
点赞数
分类专栏： 技术 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45045593/article/details/107314594
版权

这种写法在小程序端一定要注意，2n-1不能有空格，不然小程序不起效果
在这里插入图片描述
在这里插入图片描述

可以改成这种写法
在这里插入图片描述

~那一刻~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 · 组件样式效果 · 坑
weixin_41824127的博客
07-13 8656
小程序入门 -- 那些年我们踩过的坑 swiper组件     1.改变 swiper上 分页器/指示器/小圆点 /面板指示点/indicator-dots 的默认样式 默认样式效果 目标效果     方法1：             原理：改变微信小程序自带的样式，自带样式是用伪元素写的   wxss //所有指示点的父类 .customize .wx-swipe...
小程序:first-child{ border-top: none }不生效问题
zhaoge's blog
01-04 432
下方代码不起作用 <view> <view class="listItem" id="firstChild"></view> </view> .listItem:first-child { border-top: none; } 下方起作用 <view class="listItem" id="firstChild"></view> .listItem { border-top: 1px solid #000; } #fi
伪元素不生效问题，比如：：affter
m0_61177996的博客
08-15 1087
伪元素不生效问题，比如：：affter
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
杭州.黄老师
04-09 2351
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 定义和用法 :checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。 浏览器支持 小程序应用 防采集标记：黄菊华老师的课程和资料 Wxml代码 &lt;!--不支持--&gt; &lt;view&gt; &lt;checkbox&gt;选项1&lt;/checkbox&gt; ...
微信小程序伪元素显示问题解决iPhone
qq_19716091的博客
04-28 643
针对这个问题只需要给不显示下划线的元素也设置一个伪元素就可以解决了,代码示例在最后。iPhone上偶现奇怪问题,点击新的元素之后旧的元素直接消失,除非重新点击。只需要将css修改之后就可以解决这个问题。有问题的wxss样式。
小程序实现之—css伪元素实现带框加号
txfyteen的专栏
11-17 6624
背景：基于小程序包大小的限制，使用css伪元素实现带框加号。减少包体积。 图片效果如下： .add { border: 1px solid; width: 100px; height: 100px; color: #ccc; transition: color .25s; position: relative; } ...
微信小程序练习demo：点击变色
03-17
- 除了直接更改数据属性外，还可以利用CSS选择器和伪类来实现点击变色，如`:active`伪类可以设置元素被点击时的样式。 7. **调试与预览**： - 微信开发者工具提供了强大的调试和预览功能，可以实时查看和修改代码...
微信小程序实现默认第一个选中变色效果
10-18
在微信小程序开发中，有时我们需要...通过这种方式，你可以轻松地实现在微信小程序中让默认第一个选项变色，并在用户交互时改变选中状态的效果。这种方法对于构建各种列表选择场景非常实用，例如导航菜单、选项卡等。
微信小程序关键字变色实现代码实例
10-15
主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
结构伪类选择器（总结）
12-22
结构伪类选择器是CSS中的一个重要概念，它们允许开发者基于元素在HTML文档结构中的位置来应用样式。这些选择器使得我们可以更加精确地控制页面布局，而无需改变HTML结构。下面将详细阐述每一种结构伪类选择器的作用...
使用CSS伪元素实现文字部分变色的方法
09-25
实现文字部分变色的基本思路是，为每个需要变色的文字创建一个类（例如`.hf`），并利用`:before`和`:after`伪元素。首先，我们需要设置`.hf`类的基本样式，使其具有`display: inline-block`以保持文本在同一行内，`...
:after等伪元素无效
weixin_44737877的博客
01-26 1726
♦ 伪元素如果没有设置“content”属性，伪元素是无用的 #example:before { 2. content: “”; 3. display: block; 4. width: 100px; 5. height: 100px; 6.} ♦ 你也许注意到，你也可以用两个冒号(::before 和 ::after) 写伪元素，这个我以前讨论过的。简短的解释是，对于这两种语法没有什么不...
大量的用伪元素可以实现的奇妙效果
natalie86的专栏
03-26 3083
译自https://css-tricks.com/pseudo-element-roundup/ 大量的用伪元素可以实现的奇妙效果   用伪元素:before，:after你可以做出很多神奇的页面效果。对于页面上的所有元素，你得到了页面其他任何的一个html元素可以做到的效果外又添了额外的两个。它们解开了很多有趣的设计可能性但却并没有对你的语义标记产生负面影响。这里有大量的由这
使用伪元素无效
weixin_42645102的博客
11-11 1205
使用伪元素无效 今天使用伪元素 ::after 一直没有效果，确定写了content并且没有拼错单词。反复检查都没有效果，最后复制正确的代码对比，发现问题出在::after前有个空格。 li ::after /*错误*/ li::after /*正确*/ ...
关于一些伪类无法生效的情况
百岁如流富贵冷灰的博客
06-07 3389
今天在写代码的时候发现的一个关于多层次伪类无法生效的问题1.类似.class1 .class2:after{}这样的伪类是无法生效的，需要改成.class2:after{}  但是众所周知，对于：hover这样的伪类就不存在这样的问题2. 例如： .mx_table tbody tr:nth-child(odd){background:#355382;} .mx_table tbody tr:n...
微信小程序开发常见问题以及解决方式
lavendersue的博客
05-11 5429
如何去掉自定义button灰色的圆角边框 主要是button的伪元素设置了样式，去掉即可： button::after{ display: none;}
微信小程序界面设计小程序中的WXSS(css)选择器课程-::after伪元素
杭州.黄老师
04-09 2105
小程序中的WXSS(css)选择器课程-::after伪元素 定义和用法 :after 选择器在被选元素的内容后面插入内容。 请使用 content 属性来指定要插入的内容。 浏览器支持 所有主流浏览器都支持 :after 选择器。 注释：对于 IE8 及更早版本中的 :after，必须声明 &amp;lt;!DOCTYPE&amp;gt;。 实例 在每个 元素的内容之后插入新内容： &amp;lt;!DOCTYPE...
微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
杭州.黄老师
04-09 2583
小程序中的WXSS(css)选择器课程-::before伪元素 定义和用法 :before 选择器在被选元素的内容前面插入内容。 请使用 content 属性来指定要插入的内容。 浏览器支持 所有主流浏览器都支持 :before 选择器。 注释：对于 IE8 及更早版本中的 :before，必须声明 &amp;lt;!DOCTYPE&amp;gt;。 实例 在每个 元素的内容之前插入新内容： &amp;lt;!DOC...
微信小程序实现颜色选择器
最新发布
05-22
实现一个颜色选择器的小程序，可以参考以下步骤： 1. 在小程序的 WXML 文件中，创建一个 canvas 组件，并给它一个 ID，用于后面的操作： ``` <canvas id="canvas" style="width:100%;height:300px;"></canvas> ``` 2. 在小程序的 JavaScript 文件中，获取到 canvas 组件的上下文对象： ``` const ctx = wx.createCanvasContext('canvas') ``` 3. 绘制一个渐变色的矩形，作为颜色选择器的背景： ``` const gradient = ctx.createLinearGradient(0, 0, 300, 0) gradient.addColorStop(0, 'red') gradient.addColorStop(0.2, 'orange') gradient.addColorStop(0.4, 'yellow') gradient.addColorStop(0.6, 'green') gradient.addColorStop(0.8, 'blue') gradient.addColorStop(1, 'purple') ctx.setFillStyle(gradient) ctx.fillRect(0, 0, 300, 300) ``` 4. 监听 canvas 组件的触摸事件，获取用户选择的颜色： ``` wx.createSelectorQuery().select('#canvas').boundingClientRect(function(rect){ const x = event.touches[0].x - rect.left const y = event.touches[0].y - rect.top const imageData = ctx.getImageData(x, y, 1, 1).data const color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})` console.log(color) }).exec() ``` 5. 将获取到的颜色值显示在页面上，供用户查看： ``` <view>您选择的颜色是：{{color}}</view> ``` 完整代码如下： WXML 文件： ``` <view class="container"> <canvas id="canvas" style="width:100%;height:300px;"></canvas> <view>您选择的颜色是：{{color}}</view> </view> ``` JavaScript 文件： ``` Page({ data: { color: '' }, onCanvasTouch: function(event) { wx.createSelectorQuery().select('#canvas').boundingClientRect(function(rect){ const x = event.touches[0].x - rect.left const y = event.touches[0].y - rect.top const ctx = wx.createCanvasContext('canvas') const imageData = ctx.getImageData(x, y, 1, 1).data const color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})` this.setData({ color: color }) }.bind(this)).exec() }, onReady: function() { const ctx = wx.createCanvasContext('canvas') const gradient = ctx.createLinearGradient(0, 0, 300, 0) gradient.addColorStop(0, 'red') gradient.addColorStop(0.2, 'orange') gradient.addColorStop(0.4, 'yellow') gradient.addColorStop(0.6, 'green') gradient.addColorStop(0.8, 'blue') gradient.addColorStop(1, 'purple') ctx.setFillStyle(gradient) ctx.fillRect(0, 0, 300, 300) } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值