CSS开发细节

简介: CSS开发细节

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


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


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

优先级:

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


相关文章
|
5月前
|
前端开发 JavaScript 开发工具
CSS样式预处理:提高开发效率的利器
CSS样式预处理:提高开发效率的利器
64 1
|
5月前
|
Web App开发 前端开发 JavaScript
关于 Web 开发中的 CSS before 伪元素
关于 Web 开发中的 CSS before 伪元素
|
2月前
|
前端开发 JavaScript
开发过程找不到css源文件?试试配置vite的css源文件映射
【8月更文挑战第3天】开发过程找不到css源文件?试试配置vite的css源文件映射
48 0
开发过程找不到css源文件?试试配置vite的css源文件映射
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
|
4月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
43 2
|
3月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
53 0
|
5月前
|
前端开发 JavaScript Java
Java与CSS:解析在Web开发中的协同作用
Java与CSS:解析在Web开发中的协同作用
|
5月前
|
前端开发 开发者 UED
CSS能力是Web开发中不可或缺的技能
【5月更文挑战第26天】CSS能力是Web开发中不可或缺的技能
37 3
|
4月前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
24 0
|
5月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
191 7