前端css小结

如果想要修改某个封装好的框架中的css样式，找到对应的id或者class或者标签名，在css中重新设置样式但是不起效果，我们该怎么处理，可以在对应的css如类名前加/deep/即可实例如下

/deep/ .vxe-pager {
  margin-top: 1rem;
  -webkit-box-flex: 1 !important;//!important表示优先级高
  -ms-flex-positive: 1;
  flex-grow: 1;
}

如果想要进行设计手机版网页效果在css中使用

@media only screen and (max-width: 1000px) {
此处填写需要修改的样式
}

@media具体使用请自行百度，如w3c

<style lang="scss" scoped>

中lang=“scss”使你的css可以进行嵌套设计

scoped表示css样式仅在当前页面起作用

---------------------------------------------------------------------------------------------------------------------------------

[class*= col-] 代表包含 col- 的类名，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。

[class^=col-] 代表以 col- 开头的类名，比如说 col-md-4

[class$=col-] 代表以 col- 结尾的类名

扫描二维码关注公众号，回复： 15892366 查看本文章

---------------------------------------------------------------------------------------------------------------------------------


  flex-wrap: nowrap | wrap | wrap-reverse;

它可能取三个值。

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

<div style="margin-left: 20px;margin-top: 20px;display: flex;flex-wrap: wrap;">
  <div style="display: flex;flex-wrap: nowrap;">
    <img class="_imges"
      src="@/assets/icons/wpbg.png"
      style="vertical-align: top;width: 22px;height: 22px"
      alt=""
    />
    <div style="display: flex;flex-wrap: nowrap;">
      <p class="spanblack">
        WPBG
        {
  
  { monthtimestart }}年一月到
        <el-date-picker
          class="date_picker"
          @change="changemonth()"
          value-format="yyyy-MM-dd"
          v-model="monthtimeend"
          type="month"
          placeholder="选择月"
        >
        </el-date-picker>
         项目看板
      </p>
    </div>
  </div>
  <div style="display: flex;">
    <div class="_example">
      <img src="@/assets/icons/u466.svg" alt="" />
      <span class="spangray">正常</span>
    </div>
    <div class="_example1">
      <img src="@/assets/icons/u464.svg" alt="" />
      <span class="spangray">存在偏差但可控</span>
    </div>
    <div class="_example1">
      <img src="@/assets/icons/u465.svg" alt="" />
      <span class="spangray">预警</span>
    </div>
  </div>
</div>

======================================================================

console.log(user.match(/[\u4E00-\u9FA5]/g).length);//输出user中含有多少个汉字，从而进行其它操作

猜你喜欢