weex组件的样式:不可使用间接筛选器

2023-11-13

weex本身自带了很多vue中没有的组件,例如<text>等。

这些组件,也有规定好的样式,所以理论上其样式的设置方式与常规的html元素没有区别。例如:

<div id="theDiv">
    <text id="theText" style="color: white;">simple</text>
</div>

上面将<text>的文本颜色设置为白色。

 

然而,实际上weex这些组件是用各种html元素组合而成的。所以这些组件实际渲染时会被还原为各种html元素。

这带来的一个问题就是,若使用间接筛选器为<text>的文本设置颜色:

<style scoped>
    #theDiv text{
        color: white;
    }
</style>

会发现<text>的颜色并没有改变。这是因为实际页面上根本没有<text>这个元素,<text>已经被还原成一堆<div>和<p>了。页面找不到<text>元素,于是间接筛选器也就不生效。

不过,由于知道<text>还原出的元素中,最关键的文本显示由<p>负责,所以:

<style scoped>
    #theDiv p{
        color: white;
    }
</style>

这样是生效的。但并不推荐使用这种方式。

 

正确的修改方式为:

1.    像上面的例子一样,直接在<text>元素中修改style属性。

2.    为<text>定义直接筛选器,例如上面的id="theText",然后在<style>中用直接筛选器设置。

<style scoped>
    #theText{
        color: white;
    }
</style>

3.    定义一个特定的class,<text>直接使用该class。

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

weex组件的样式:不可使用间接筛选器 的相关文章

  • weex 项目上传服务器,Weex项目构建流程

    新建一个 package json 文件 xff0c 并且编写内容如下 xff1a 34 name 34 34 weex 34 34 version 34 34 1 0 0 34 34 description 34 34 34 34 mai
  • Weex简介和环境的安装——Weex的学习之路(一)

    Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验 来构建 Android iOS 和 Web 应用 简单来说 在集成了 WeexSDK 之后 你可以使用 JavaScript 语言和前端开发经验来开发移动应用 也就是说
  • 厉害了,用 Java 也能实现图片识别!

    点击上方 Java基基 选择 设为星标 做积极的人 而不是积极废人 源码精品专栏 原创 Java 2020 超神之路 很肝 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络应用框架 Netty 源码解析 消息中间件 Rock
  • JavaScript 经典「红宝书」,几代前端人的入门选择

    文末有活动 人的一生中总要读几本经典书 在这个 经典 泛滥的年代 什么才是权威的代表 我想大概是一本的书的口碑 能积累下上佳口碑的书 往往也是能经得住时间推敲的 比如这本 我相信所有前端开发者的案头都有这样一本书 这本书最早的版本第 2 版
  • 为什么说“低估值买入,买到即赚到”?

    投资究竟能不能挣到钱 到底是由哪个环节决定的 买入还是卖出 直觉上说 这个问题的答案理所当然是 卖出 就连路边卖杂货的小商贩都明白 只要卖出价高于买入价 就可以挣到钱 直到我看了 穷查理宝典 接触到价值投资的理念 想法有了根本性改变 买入的
  • Android 12上全新的应用启动API,适配一下?

    今日科技快讯 近日 谷歌宣布 将在欧洲市场上销售的Android手机中免费添加更多移动搜索应用 欧洲Android用户可以通过全新的 搜索引擎选项 来选择并设置自己设备上的默认搜索引擎 作者简介 本篇文章来自TechMerger同学的投稿
  • Weex加载数据缓冲旋转动画的实现

    Weex Ui已经上线了加载动画了点击这里跳转 手写的我眼泪都掉了下来 由于Weex手机端不支持gif图片 然而公司项目又要我加个加载动画 所以手写了一个动画加载组件 注意1 需要用到组件不会用组件的可以点击看看这篇文章 Weex Vue组
  • 学会不被洗脑 很重要!

    大家好 我是北妈 今天发一个铁粉在桃花岛向我提问的问题 0 虚x 提问 最近网暴频发 网友甚至好友互相攻击 在越来越复杂的社会事件中 怎么提升自己的思考深度 怎么避免被洗脑 北妈怎么看 这个话题我不止一次说过了 就是其中一个原则 兼听则明
  • 超硬核!程序员10种副业赚钱之道,实现月收入增加20k!

    大家好 我是良许 经常有小伙伴问我说 良许 你的副业搞得那么溜 能不能给我们介绍一些可操作性的副业 让我们在让我们在工作之余能有另外一份收入 为了响应大家的需求 本文我就整理了一些我所知道的适合程序员的副业 向大家做一个分享 这些副业 每个
  • OpenCV源码Android端编译,用时三天,我编了个寂寞。。。

    学更好的别人 做更好的自己 微卡智享 本文长度为1526字 预计阅读4分钟 导语 全网首发微信二维码引擎Android平台移植 中有介绍OpenCV源码及扩展模块Android端的编译 其中扩展模块里的人脸细节特征点是准备要测试看看的 于是
  • 2020年下一个创业风口是什么?

    提到风口 大家总是兴致勃勃 满心期待的看完一个风口项目后 剩下的不是去选择执行 而是继续问道 还有其它的风口项目吗 所以 在我看来 对于大多数人而言 风口就是继续追问 没完没了的问还有其它的吗 今年没有抓住风口 告诉自己 不能灰心 明年拜菩
  • 史上最全ConstraintLayout使用详解

    今日科技快讯 全球最大半导体代工制造商台积电周四公布了2021年第一季度喜人财报 净利润达49亿美元 同比增长19 然而该公司首席执行官魏哲家警告称 全球芯片短缺可能会持续到2022年 这个问题如今正在严重影响全球工业 作者简介 又要到愉快
  • Weex 项目总结

    在项目中 我觉得暂时有两个地方需要总结一下 一个是weex内部的数据请求 一个是原生方法得调用 数据请求 在PC端调试的话会有跨域问题 在手机端没有跨域问题 原生方法需要原生开发者根据 Weex文档 写一个module 再暴露出一个方法给前
  • weex studio爬坑之旅之禁止ESLint

    weex studio爬坑之旅之禁止ESLint ESLint据说是个很好的插件 但是对我这种刚学weex的新手 在安装vue和weex ui后是免不了ctrl v的 但是运行后预览界面打不开着实让人头疼 weex studio也发行了许久
  • 无线路由器及Wi-Fi组网指南(史上最全)

    白驹过隙 逝者如斯 经过断断续续几个月的更新 关于无线路由器和Wi Fi的介绍终于告一段落 其实 这个话题下还有很多很多的内容没有涉及到 然生有涯而知无涯 只能在此暂且搁笔 后续缘起再续 下面 正文开始 1 什么是无线路由器 在5 时代 手
  • weex组件的样式:不可使用间接筛选器

    weex本身自带了很多vue中没有的组件 例如
  • 陀螺研究院×BSN丨解析区块链视角下的消费者权益保护访谈全文发布

    3月是我国消费者权益保护月 在近日播出的3 15晚会中 央视曝光了科勒卫浴 宝马 Max Mara多家知名商店安装人脸识别摄像头 手机清理软件泄露老人隐私 瘦肉精羊等多个极其恶劣的消费者权益侵害行为 可以看出 随着数据时代的渐行渐近 消费者
  • 弃用Dubbo!这个新一代框架阿里都用疯了!

    哪个Java框架火 要说几年前 那你大可能会说是Spring Cloud Dubbo 但是现在 你还会说是它们吗 微服务当道 阿里巴巴开源一个Spring Cloud的子项目Spring Cloud Alibaba 它用两年的时间在众多架构
  • RateLimiter 的底层实现是啥?

    点击上方 Java基基 选择 设为星标 做积极的人 而不是积极废人 源码精品专栏 原创 Java 2020 超神之路 很肝 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络应用框架 Netty 源码解析 消息中间件 Rock
  • Weex实现富文本展示

    Weex默认不支持富文本展示 需要我们手动实现 已知的方式有两种 第一种方式 使用Weex Ui中的wxc rich text组件 它提供了丰富的功能样式 但是其局限性也是显而易见的 不能直接识别h5样式 第二种方式 第一步 自定义组件 请

随机推荐

  • excel+power query进行文本数据拆分和提取

    我的博客之前分享了pandas中文本数据的拆分和提取 由于数据量不大 我们也可以使用excel和它自带的插件power query进行同样的处理 原始数据如下 数据来源见此贴 登录爬取拉勾网2 0 Python selenium 数据准备
  • Python编程:安装自己编写的包

    前言 最近在跑人群计数代码时 有一些自己经常用到的代码 每次要用时再写一次总是很麻烦 所以想着把这部分常用的代码封装成库 以便于随时随地使用 做法 这里使用一种简易的方式 直接将自己编写的代码文件夹复制到python能够搜索到的位置 首先在
  • make -C $(LINUX_KERNEL_PATH) M=$(PWD) modules中的M选项

    新的内核模块编程中的make命令里有个M选项 如下 make C lib modules shell uname r build M PWD modules M PWD 意思是返回到当前目录继续读入 执行当前的Makefile 请参考 从
  • 软件、硬件版本号命名规范

    软件 硬件版本号命名规范 常见版本号规范示例如 v1 0 0 通用版本命名规范如下 主版本号 子版本号 修订版本号 日期 版本阶段 如v1 2 3 20201228 rc 主版本号 1 功能模块发生较大变动 如增加多个模块 整体架构改变 子
  • Linux基础篇大集合

    目录 一 基础篇 一 基本常识 1 linux的三种网络连接方式 2 虚拟机的克隆 3 虚拟机的快照 4 虚拟机的迁移和删除 二 目录结构 三 基本实操 1 远程连接Linux操作系统 2 vi vim编辑器 3 Linux关机重启 4 用
  • react+react-router 4.0+redux+antd 购物车实战项目

    前言 前些日子抽空学习了下react 因为近期忙着找工作 没时间写博客 今天我们就来看看用react全家桶 构建一个项目把 可能我学的也不是特别好 但是经过各种查资料 总算是能够构建出一个像模像样的栗子了 github地址 https gi
  • c++开发框架Qt6:构建系统CMake详解

    Qt自带集成开发环境 IDE 名为Qt Creator 它可以在Linux OS X和Windows上运行 并提供智能代码完成 语法高亮 集成帮助系统 调试器和剖析器集成 还集成了所有主要的版本控制系统 如git Bazaar 除了Qt C
  • 台式电脑显示配置100%请勿关闭计算机,Win7关机提示“配置Windows Update已完成30%请勿关闭计算机”怎么解决...

    重装了Win7旗舰版系统后 每次关机的时候桌面上都会显示一个 配置Windows Update的界面 提示请勿关闭计算机 每次停留好几分钟才能正常关机 导致什么情况引起的呢 出现配置Windows Update是因为系统开启了自动更新功能
  • 基于Vue的Excel文件预览(使用LuckyExcel、LuckySheet实现)

    目录 一 介绍 二 基本思路 三 安装 Luckyexcel Luckysheet CDN引入 本地引入 四 具体实现 1 首先需要一个页面 用于excel的预览展示 2 编写Excel解析渲染函数 openExcel url链接 文件名
  • Flutter 基础(五)Route 路由以及页面间传值

    Route 路由以及页面间传值 一种页面跳转机制 路由 Route 对应到 Android 就是 Intent Flutter 路由分两种 新建路由 注册路由 需要Route表示 Navigator进行管理 跳转页面 Navigator p
  • 区块链与征信

    1 为什么要将区块链应用在征信上 1 1 中国征信产业发展现状 图1 中国征信产业发展现状 1 2 区块链征信的可行性分析 首先 从个人层面来说 区块链能帮助我们确立自身的数据主权 生成自己的信用资产 这是个人信用生产的基础 也是我们将来的
  • 各种动态规划算法的C语言

    以下是常见的几种动态规划算法的C语言实例 01背包问题 include
  • ftp用户只能ftp

    test用户 usermod s sbin nologin test 锁定telnet usermod s bin bash test 解锁
  • 【深度学习】动手学深度学习——编码器-解码器

    参考资料 https zh d2l ai chapter recurrent modern encoder decoder html 1 深度学习简介 核心思想 用数据编程 机器学习 寻找适用不同问题的函数形式 以及如何使用数据来获取函数的
  • discuz访问手机端跳转到PC端

    discuz访问手机端跳转到PC端 博主描述下遇到的问题 后台手机访问设置中手机端已开启 但手机端访问时却不能跳转到手机端 有些页面链接加上参数mobile 2才可以 对此 查看下 后台 手机访问设置 中以下两项是否打开 记得开启手机浏览器
  • Python从txt文件中提取特定数据

    本段代码用于 想要从一段txt文件中只提取目标数据的情况 代码 def get data txt path str epoch int 100 target str target data len int 5 num list 将提取出来的
  • PostgrelSQL清除WAL日志

    1 查看当前日志回写情况 pg controldata pg control version number 1300 Catalog version number 202007201 Database system identifier 6
  • hdu 4712 Hamming Distance

    Problem acm hdu edu cn showproblem php pid 4712 Reference 多向 bfs 思路 CSDN markdown 用 LaTeX Meaning 定义两个整数数 a 和 b 的汉明距离为 a
  • uniapp使用及踩坑项目记录

    环境准备 下载 HBuilderX 使用命令行创建项目 webstorm环境准备 webstorm支持rpx 1 下载wechat mini program support插件 2 在Preferences中搜索Wechat Mini Pr
  • weex组件的样式:不可使用间接筛选器

    weex本身自带了很多vue中没有的组件 例如