您现在的位置是：网站首页> 编程资料编程资料
解决css中的匹配问题CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
2021-09-03
877人已围观
简介 这篇文章主要介绍了css中的匹配问题,本文通过多种方式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
问题描述
众所周知在写 css的时候，会根据html 中类的定义或者 id 的定义来写相应的 css代码。给不同的类定义不同的样式，当然为了能够少写一些代码，大家就会在css 中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有几种。当然也可以在 html 中写不同的类名，或者写相同的类名，就能够实现所有的样式的匹配。但有时候类名不能够写到相同，这样就会出现冗余的代码，就会造成代码复杂度的增强。为了减少代码的冗余，就出现了类的匹配。
解决方案
第 1 种就是利用 div 进行匹配，但这种匹配会给所有的 div 都使用相同的样式。
// 如果要设置内部所有 div 样式；则使用 > 标识符 .parent>div{ //style// }
第 2 种是利用 class 定义的类进行匹配。这种匹配就相对精确，也有两种匹配方式。第 1 种匹配方式是利用箭头符号进行匹配。例如： [class^="icon-"]
Title 11112222333344445555
图 2.1 效果
但这种匹配方式需要类名前面为 icon- 的才可以。如果类名前面还有其他的命名，就不能够发挥相应的效果。因此就可以使用另一种匹配方式。也就是类名中的全局匹配。例如：
[class*=" icon-"] ，需要注意的是在 icon 前面有一个空格。而且需要将上面的箭头换为星号，这样就能够实现相应类名的全局匹配。
Title 1111222233334444555
图 2.2 效果
这样就能够实现，只要类名中含有 Icon 的都可以实现样式的匹配。但这种匹配，对于开始为 icon 类名的就无法实现相应的效果，所以可以将两者配合使用。这样就可以完全的实现匹配效果。
图 2.3 效果
对于实现上述效果，有两种方式。第一是两者的配合使用，第二就是清除 icon 前面的空格。
Title 1111222233334444555
这样就能够减少代码的冗余了。
在写代码的过程中一定要学会减少代码的冗余，这样的程序就能够更好的运行。
到此这篇关于css中的匹配问题的文章就介绍到这了,更多相关css 匹配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
相关内容
- CSS实现底部tapbar栏功能css实现网页栏目左侧固定当滚动到底部时自动调整位置
- 用CSS播放声音的几种技巧方法CSS3动画之利用requestAnimationFrame触发重新播放功能巧用CSS滤镜制作绚丽图片播放效果-CSS教程-网页制作-网页教学网
- 利用CSS中的 outline-offset 属性实现加号css中filter属性和backdrop-filter的应用与区别详解详解HTML5中CSS外观属性CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)CSS字体、文本、列表属性详细介绍奇妙的 CSS 属性 MASK详解CSS 继承 inherit属性的方法css一些不常见但很有用的属性操作大全
- 用CSS Grid布局制作一个响应式柱状图的实现使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码CSS columns实现两端对齐布局的示例代码解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局CSS 外边距(margin)重叠及防止方法解决margin 外边距合并问题 css 布局 之 两端布局的实例代码 （利用父级负的margin）
- 浅析CSS中单位px、rem、em、vh、vw之间的区别CSS 中px、em、rem、%、vw、vh单位之间的区别详解CSS3移动端vw+rem不依赖JS实现响应式布局的方法css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况浅析rem和em和px vh vw和% 移动端长度单位如何利用vw+rem进行移动端布局
- css中一些常用的font-size字体单位和line-height详解详解使用 CSS 的 font-size-adjust 属性改善网页排版知识普及之CSS: body{font-size: 62.5%;}这种写法的原因CSS中的font-size属性使用教程CSS的font-size属性及其em值的使用CSS Font-Size: em、px 、pt 、Percent之间的关系及换算css font-size属性说明CSS网页布局学习之Font-size的妙用
- css+html实现Skeleton Screen 加载占位图动画效果（带动画）CSS实现Skeleton Screen骨架屏效果
- Flex布局做出自适应页面(语法和案例)详解flex布局中保持内容不超出容器的解决办法flex弹性盒布局最后一行左对齐的实现思路深入浅析CSS3中的Flex布局整理详解CSS中的flex布局flex布局兼容性问题小结详解flex布局的元素如何分配容器的剩余空间flex布局被子元素撑开如何保持内容不超出容器的方法Chrome 73导致flex布局崩坏的分析与解决方法flex布局实现左侧文字溢出省略右侧文字自适应详解CSS3伸缩布局盒模型Flex布局
- 详解flex布局中保持内容不超出容器的解决办法详解flex布局的元素如何分配容器的剩余空间flex布局被子元素撑开如何保持内容不超出容器的方法css使用flexbox布局容器内多元素水平居中
- css3实现背景模糊的三种方式(小结)CSS设置背景模糊的实现方法CSS设置背景图片模糊内容不模糊的解决方法
