CSS几种常见的样式污染

对于我们初学者来说CSS最怕的就是样式污染,我会将我遇到的样式污染不定期的整理到这篇文章中,欢迎关注。

1 公共样式和其他样式混用

CSS部分

        .checkIn{
  background-image: url("http://www.1milliondance.com/new1m/assets/img/visual/bg_howtoregister.jpg");
  height: 972px;
  width: 458px;
  background-size:auto 979px;
  background-position-x:center;
  position: relative;
  z-index: 0;

}

html部分

<div class="checkIn FL">
    <div class="checkInin">
      <h1 class="h11">课程登记方法</h1>
     <div class="line"></div>
     <p class="pp">如何申请课程登?</p>
     <p class="pp">通过视频了解详情!</p>
    </div>
  </div>
  </div>
  <div class="timetable FL">
    <h1 class="h11">课程表</h1>
    <div class="line"></div>
    <div>请输出详细课程表!</div>
  </div>
  <div class="vedio FL">
    <h1 class="h11">观看视频</h1>
    <div class="line"></div>
    <p class="pp">1000万粉丝正在关注!</p></br>
    <p class="pp">马上去Youtube观看视频。</p>
  </div>
  <div class="route FL">
    <h1 class="h11">来访路线</h1>
    <div class="line"> </div>
    <p class="pp">1MILLION舞蹈工作室的门一直为大家敞开着!</p>
  </div>

效果
这里写图片描述

第一张图片里的白线被checkIn的格式所影响了,所以公共样式一般不要和其他样式混在一起使用

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue项目中,样式污染是指当页面增加时,重复调用同一种组件会造成样式冲突的问题。这个问题主要有两个原因导致。首先,使用了同一种组件,但在CSS中对该组件设置了不同的样式。其次,子元素的根元素会继承父元素的ScopeId。为了解决这个问题,有几种方法可以尝试。 一种解决方案是在每个Vue页面的style标签中添加scoped属性。scoped的原理是给CSS和HTML添加一个唯一标识,并根据权重来实现目的。scoped的作用是使得Vue组件中的样式不会影响其他Vue组件,但不是让Vue组件样式不受外界影响。然而,scoped需要谨慎使用。在需要修改公共组件(第三方库或项目中定制的组件)的样式时,scoped会导致一些麻烦。针对这种情况,可以在style标签中使用两个样式,将修改公共组件的样式放在一个style标签中,而将其他样式放在另一个带有scoped属性的style标签中。 另一种解决方案是使用不同的class来区分不同的表格分页控件。比如,对于sos表格,可以在template中设置一个特殊的class,然后在CSS样式中使用该class名和属性名称来设置分页的背景颜色。对于emergencytask表格,可以在template中设置一个不同于其他表格分页的class,然后在CSS样式中使用该class名和属性名称来设置分页的背景颜色。这样,可以避免样式的重叠和干扰。 综上所述,为了解决Vue项目中的样式污染问题,可以使用scoped属性来限制组件样式的影响范围,同时要注意scoped的使用场景。另外,可以使用不同的class来区分不同的表格分页控件,以避免样式的冲突。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [浅谈VUE中的样式污染问题](https://blog.csdn.net/qq_33204193/article/details/87886269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值