首页 > 其他分享 >v-html 中的样式覆盖

v-html 中的样式覆盖

时间:2023-11-22 09:24:17浏览次数:31  
标签:覆盖 样式 deep 穿透 html 生效

v-html 里 的内容样式如果直接在 style里覆盖样式, 不生效。需要样式穿透才行

<template>
    <div v-html="goodDetails.introduction" class="introduction">
</template>
<style lang="scss" scoped>
.introduction /deep/ img {
	width: 100% !important;
	object-fit: fill;
}
</style>

ps: 注意这里样式穿透用得是 /deep/,如果用 >>>也不生效

标签:覆盖,样式,deep,穿透,html,生效
From: https://www.cnblogs.com/liuyishi/p/17848116.html

相关文章

  • webpack的html模板中插入变量写法
    vue-cli文档中的描述如下Index文件#public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。另外,VueCLI也会自动注入resourcehint(preload/prefetch、manifest和图标链接(当用到PWA插件时)以及构建过程中处理的Ja......
  • jquery 检测div宽度变化_jquery判断浏览器宽度小于指定值改变div样式
    浏览器原本样式当浏览器宽度小于1200px时样式变为代码如下:方法一:直接修改该div样式添加w1200,会覆盖前一个样式$(function(){var_width=$(window).width();//获取浏览器宽度if(_width<1200){$(".chenbin_org").addClass("w1200");}});方法二:修改该div的class属性......
  • html字间距怎么设置?
    在HTML中,可以通过CSS来设置字间距。字间距指的是字符之间的空白区域,在网页设计中,修改字间距可以改变文字的外观和排版效果。下面详细介绍如何使用CSS来设置字间距。使用letter-spacing属性在CSS中,可以使用letter-spacing属性来设置字间距。该属性控制字符之间的额外水平空间,可......
  • MD转带目录的html
    使用i5ting_toc。1.安装npm2.安装i5ting_tocnpminstall-gi5ting_toc3.转htmli5ting_toc-fxx.md-o需要进入md的目录4.效果 备注:可以修改上图目录里的”tableofcontent“,打开preview\toc\js\ztree_toc.js,修改 ......
  • Teamcenter AWC开发,如果要使用原生的HTML下拉框控件的坑
    1、如果要在AWC原生的弹出框中<aw-popup2>,加入下拉框<selectname="fruit"><optionvalue="apple">Apple</option><optionvalue="banana">Banana</option><optionvalue="orange">Orange</......
  • Vue动态改变css样式的3种方法
    在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式:class="[occupation==='请选择'?'lh60':'lh61']"css.red{color:red;}.blue......
  • (uniapp)小程序实现自定义弹框,自定义样式showmodal
    在components里新建自定义弹框组件——modal.vue<template><!--自定义弹窗--><viewclass="_showModal"v-show="show"><viewclass="_shade"></view><viewclass="_modalBox">......
  • 如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段
    笔者这篇文章介绍了AngularSSR应用StateTransfer的工作机制和错误排查方法。SSR服务器端发送给客户端response里包含的StateTransfer数据的一个例子如下:<scriptid="serverApp-state"type="application/json">...&q;headers&q;:{&q;date&q;:[&q;Fri,05Mar......
  • 4、全局样式使用
    1、在assets文件下面创建css样式文件,如:assets/css/global.css 2、引用全局样式,在main.ts文件里面引用样式文件 3、页面效果如下  ......
  • html 下载图片
    varimage=newImage()image.setAttribute('crossOrigin','anonymous')image.onload=function(){varcanvas=document.createElement('canvas')canvas.width=image.widthcanvas.height=image.heightva......