CSS开发细节

简介: CSS开发细节

在前端页面(管理系统)开发中,大部分是使用了组件开发。如vue.js中就经常使用elementUI、Ant design等。而有时候组件的提供的样式达不到自己预想的效果,但在vue组件中style设置为scoped(以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的)的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。


但是需要细节,/deep/和".class"中之间需要空格,否则不会生效。


/deep/ .el-form-item__content {
    line-height: 5px;
  }

优先级:

优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器


相关文章
|
1月前
|
前端开发 JavaScript 开发工具
CSS样式预处理:提高开发效率的利器
CSS样式预处理:提高开发效率的利器
38 1
|
1月前
|
Web App开发 前端开发 JavaScript
关于 Web 开发中的 CSS before 伪元素
关于 Web 开发中的 CSS before 伪元素
|
14天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
25 2
|
28天前
|
前端开发 JavaScript Java
Java与CSS:解析在Web开发中的协同作用
Java与CSS:解析在Web开发中的协同作用
|
7天前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
8 0
|
1月前
|
前端开发 开发者 UED
CSS能力是Web开发中不可或缺的技能
【5月更文挑战第26天】CSS能力是Web开发中不可或缺的技能
24 3
|
1月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
41 1
|
1月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
1月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
1月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。