专栏首页算法与编程之美网页|css中的匹配问题

网页|css中的匹配问题

问题描述

众所周知在写css的时候,会根据html中类的定义或者id的定义来写相应的css代码。给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有几种。当然也可以在html中写不同的类名,或者写相同的类名,就能够实现所有的样式的匹配。但有时候类名不能够写到相同,这样就会出现冗余的代码,就会造成代码复杂度的增强。为了减少代码的冗余,就出现了类的匹配。

解决方案

第1种就是利用div进行匹配,但这种匹配会给所有的div都使用相同的样式。

<div>

     <div  id='div1'/>

    <div  id='div2'/>    

</div>

//如果要设置内部所有div样式;则使用 > 标识符

.parent>div{

       //style//

}

第2种是利用class定义的类进行匹配。这种匹配就相对精确,也有两种匹配方式。第1种匹配方式是利用箭头符号进行匹配。例如:[class^="icon-"]

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class^="icon-"]{

            width: 100px;

            height: 50px;

            background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div>5555</div>

</body>

</html>

图2.1 效果

但这种匹配方式需要类名前面为icon-的才可以。如果类名前面还有其他的命名,就不能够发挥相应的效果。因此就可以使用另一种匹配方式。也就是类名中的全局匹配。例如:

[class*=" icon-"],需要注意的是在icon前面有一个空格。而且需要将上面的箭头换为星号,这样就能够实现相应类名的全局匹配。

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class*=" icon-"]{

            width: 100px;

            height: 50px;

            background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success  icon-t">555</div>

</body>

</html>

图2.2 效果

这样就能够实现,只要类名中含有Icon的都可以实现样式的匹配。但这种匹配,对于开始为icon类名的就无法实现相应的效果,所以可以将两者配合使用。这样就可以完全的实现匹配效果。

图2.3 效果

对于实现上述效果,有两种方式。第一是两者的配合使用,第二就是清除icon前面的空格。

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class^="icon-"],[class*=" icon-"]{

            width: 100px;

            height: 50px;

             background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success  icon-test">555</div>

</body>

</html>

这样就能够减少代码的冗余了。

在写代码的过程中一定要学会减少代码的冗余,这样的程序就能够更好的运行。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:桂军

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java|“ Java”来爬取小说章节

    在上一篇Java|使用WebMagic进行电话爬取“的文章里就已经介绍了如何主要使用Pageprocessor去爬取电话号码,接下来将要学习到的是去爬取起点中文...

    算法与编程之美
  • 网页|利用Zepto框架实现宝箱开启效果

    Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间,兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架,为了兼容低级、高级浏览器...

    算法与编程之美
  • Python|简单爬取豆瓣网电影信息

    在掌握一些基础的爬虫知识后,就可以尝试做一些简单的爬虫来练一练手。今天要做的是利用xpath库来进行简单的数据的爬取。我们爬取的目标是电影的名字、导演和演员的信...

    算法与编程之美
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • jquery拼接数据循环一个数据列表

    但从后端请求过来json数据之后,需要把数据做成循环列表,那么,怎么jquery拼接数据循环一个数据列表?现在写一个简单的demo,效果如下所示:

    祈澈菇凉
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端
  • 伪类,图片中出现文字·

    Wyc
  • css布局使用

    目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

    听城
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券