没有合适的资源?快使用搜索试试~ 我知道了~
在 Vue 的开发中,我们经常会用到外部组件库,例如 element,当使用 element 组件库中的某一个组件的时,我们可能会希望有一些定制的地方,通常的做法是 用CSS覆盖;有时层级不够就要另辟他径。 less使用/deep/ css使用>>> Angular适用深度选择器 使用组件样式 对你编写的每个 Angular 组件来说,除了定义 HTML 模板之外,还要定义用于模板的 CSS 样式、 指定任意的选择器、规则和媒体查询。 实现方式之一,是在组件的元数据中设置 styles 属性。 styles 属性可以接受一个包含 CSS 代码的字符串数组。 通常你只给它一个字符串就行了,如同下
资源推荐
资源详情
资源评论
解析解析vue、、angular深度作用选择器深度作用选择器
在 Vue 的开发中,我们经常会用到外部组件库,例如 element,当使用 element 组件库中的某一个组件的时,我们可能会希
望有一些定制的地方,通常的做法是 用CSS覆盖;有时层级不够就要另辟他径。
less使用/deep/
css使用>>>
Angular适用深度选择器适用深度选择器
使用组件样式
对你编写的每个 Angular 组件来说,除了定义 HTML 模板之外,还要定义用于模板的 CSS 样式、 指定任意的选择器、规则
和媒体查询。
实现方式之一,是在组件的元数据中设置 styles 属性。 styles 属性可以接受一个包含 CSS 代码的字符串数组。 通常你只给它
一个字符串就行了,如同下例:
<!--src/app/hero-app.component.ts-->
@Component({
selector: 'app-root',
template: `
<h1>Tour of Heroes</h1>
<app-hero-main [hero]="hero"></app-hero-main>
`,
styles: ['h1 { font-weight: normal; }'] })
export class HeroAppComponent {
/* . . . */
}
范围化的样式范围化的样式
在@Component的元数据中指定的样式只会对该组件的模板生效
它们既不会被模板中嵌入的组件继承,也不会被通过内容投影(如 ng-content)嵌进来的组件继承。
在这个例子中,h1 的样式只对 HeroAppComponent 生效,既不会作用于内嵌的 HeroMainComponent ,也不会作用于应用中
其它任何地方的 h1 标签。
这种范围限制就是所谓的样式模块化特性
可以使用对每个组件最有意义的 CSS 类名和选择器。
类名和选择器是局限于该组件的,它不会和应用中其它地方的类名和选择器冲突。
组件的样式不会因为别的地方修改了样式而被意外改变。
你可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起,这将促成清爽整洁的项目结构。
将来你可以修改或移除组件的 CSS 代码,而不用遍历整个应用来看它有没有在别处用到。
特殊的选择器特殊的选择器
组件样式中有一些从影子(Shadow) DOM 样式范围领域(记录在W3C的CSS Scoping Module Level 1中) 引入的特殊选择
器:
:host
使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。
<!--src/app/hero-details.component.css-->
:host {
display: block;
border: 1px solid black;
}
:host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是
父组件模板的一部分。
要把宿主样式作为条件,就要像函数一样把其它选择器放在 :host 后面的括号中。
资源评论
weixin_38658982
- 粉丝: 7
- 资源: 941
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功