意外的未知伪元素选择器"::ng-deep“
"::ng-deep" 是 Angular 框架中用于样式穿透的伪元素选择器。
概念： "::ng-deep" 伪元素选择器允许在 Angular 组件中穿透组件样式封装，直接选中组件内部的子组件，并对其样式进行操作。
分类： "::ng-deep" 是一个特定于 Angular 框架的伪元素选择器。
优势：
- 样式穿透：使用 "::ng-deep" 选择器可以绕过 Angular 组件样式封装的限制，直接选择子组件并修改样式。
- 组件样式控制：通过 "::ng-deep"，可以更加灵活地控制组件内部子组件的样式。
应用场景：
- 修改子组件样式：当需要在一个 Angular 组件中修改其子组件的样式时，可以使用 "::ng-deep" 选择器来实现。
推荐的腾讯云相关产品： 腾讯云提供了一系列云服务，涵盖了云计算、人工智能、物联网等领域，但是没有直接相关的产品推荐。
补充链接地址： 目前腾讯云官方文档中没有直接与 "::ng-deep" 相关的内容。你可以参考 Angular 官方文档中关于 "::ng-deep" 的详细说明和示例：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
相关·内容
在WebStorm中，带有scss和：：ng- 2+的Angular选择器使用文本“未知伪选择器'ng-deep'”突出显示此选择器。
我试过这样的方法：
selector-pseudo-class-no-unknown: true
ignorePseudoClasses: ng-deep
or
selector-pseudo-class-no-unknown: false
这些都不管用。
如何在scss-lint.yml中为这个伪选择器设置异常？
浏览 10提问于2017-08-04得票数 15
回答已采纳
我正在尝试弄清楚::ng-deep选择器到底是如何工作的。它如何省略随机的nghost和ngcontent属性名称？
提前感谢
浏览 4提问于2018-10-10得票数 0
早上好。我目前有以下内联垫-日历角材料组件。我不需要这个组合框，但我需要箭头。我怎么禁用它？我已经试过几件事了，但都没有用！
这是我目前使用的代码。
<mat-card>
<mat-calendar
[(selected)]="selectedDate"
(selectedChange)="selectedDateChange($event)"
[minDate]="loadedMinHoliday"
[maxDate]="loadedMaxHolid
浏览 5提问于2021-09-06得票数 0
回答已采纳
2回答
如何在不更改封装视图的情况下从父级更新某些子组件css？
这是示例
app.component.ts
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
hello.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template:
浏览 1提问于2018-12-12得票数 0
回答已采纳
当响应元素出现时使用clr-header，有什么方法可以改变颜色吗？ 我使用的clr-header与自定义的背景颜色，这是轻，因此图标不清楚地显示在此。 我曾尝试修改.header-overflow-trigger背景色CSS值，但我假设它不是全局的，因为它没有任何效果。
浏览 14提问于2019-02-22得票数 1
回答已采纳
我是新的角度，只是一个应用阴影DOM CSS选择器的问题。下面是一些伪代码：
//root template.html
<div id="first">
<div id="second">
<paProductForm ..."></paProductForm>
<div>
</div>
其中paProductForm是我的自定义组件的选择器，如：
@Component({
selector: "paProductForm",
浏览 6提问于2019-11-06得票数 0
1回答
Angular 8和巴比伦主题:它有一些奇怪和恼人的蓝色边框和p-tree-component。 我在CSS/SCSS文件中找不到它的来源以及如何摆脱它们；至少更改为不那么烦人。 有没有人知道如何定制这个，谢谢。 ?
浏览 6提问于2019-12-30得票数 0
回答已采纳
7回答
我试图使用::ng-deep访问和编辑子组件的CSS类。我尝试了下面提供的不同版本的代码，但是我无法访问CSS。HTML组件的结构如下：
这就是我试图从父组件访问CSS并更改类的grid-template-columns属性的方式：
::ng-deep{
app-operator-filter{
.header-logos-card{
grid-template-columns: repeat(4,1fr);
}
}
}
实现这一目标的正确语法是什么？我也对访问子组件的其他建议持开放态度，因为我已经读到::ng-deep不可靠，可能很快就会被废弃？
浏览 10提问于2020-10-06得票数 1
回答已采纳
1回答
在我的六角形应用程序里。我已经创建了许多组件。对于显示数据，我使用了ng2-smart-table。
我有一些特殊的要求隐藏默认分页栏。并显示自定义分页。
为此，我刚刚在组件的SCSS文件中设置了css。
::ng-deep .ng2-smart-pagination-nav {
display: none
}
但这也会影响到所有其他组件。
直到我知道和RND，在角度上，我们使用每个组件有他们的每个scss文件。那么，我的问题是，为什么这个css也影响到所有其他组件？如何防止这一问题的发生？
浏览 1提问于2018-09-12得票数 0
回答已采纳
我想要更改一个CSS类的'content‘属性，这个类应用于angular的Slide-Toggle。
这是我的SCSS -
:host .red {
.mat-toggle {
::ng-deep .mat-slide-toggle-bar{
&::after{
content: attr(data-active);;
}
}
}
}
我就是这样通过attrs的-
<div class="red"
attr.data-active="activeData">
&
浏览 1提问于2020-11-23得票数 0
我有一个组件parent，我在其中将input.So投影到我的app.component.html文件中 <app-parent>
<input />
</app-parent> 例如，我想在我的输入上添加红色边框，如果我用app.component.css编写 input {
border: 2px solid red !important;
} 它将在输入上应用红色边框。 但我想在parent components css中设置此输入的样式 所以如果我在那里写-在parent.component.css文件中 input {
border:
浏览 13提问于2021-07-28得票数 0
回答已采纳
请直截了当地解释一下:host /deep/是什么意思：
:host /deep/ .ui-autocomplete {
width: 85%;
}
浏览 1提问于2017-10-24得票数 24
回答已采纳
1回答
一般来说，我对Angular和前端开发是个新手。
我有一个多选选择组件，在勾选选项时，我希望在框中看到一个勾号。目前，这个盒子只是被“黑屏”了。
通过inspect查看应用程序时，我可以打开和关闭不同的样式选项。如果我关闭下面的选项，我就会得到我想要的：
.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
background: #2e2d2d;
}
它位于:node_modules/@angular/material/_heming.scss
有没有一
浏览 22提问于2019-11-04得票数 1
回答已采纳
我正在我的angular项目中使用ngx carousel，并想禁用导航箭头.I已经尝试了以下代码，但都没有成功 .carousel-control {
display: none;
} 看起来我的css不能覆盖ngx引导css。有人能帮我做这个吗？
浏览 27提问于2019-01-28得票数 0
回答已采纳
我正在编写一个包含可重用组件的Angular库。我想为这些提供一些开箱即用的默认样式，但我希望在应用程序中使用这些库组件时，可以轻松覆盖这些默认样式或进行细粒度的自定义。
执行此操作时的最佳实践是什么？例如，如果我像这样为一个'test‘组件定义了一个组件模板，并且我决定大多数时候宽度将被设置为50% (简单的例子)：
<div class="title">
Test
</div>
.title {
width: 50%;
}
在一个特定的消费者应用程序中，我希望这个标题显示我正在使用的特定容器的100%：
<div class
浏览 1提问于2017-07-04得票数 1
1回答
我正在尝试在template.html：<ng-content select="span.blue-label.button-content"></ng-content>中对这个ng内容进行样式化。
模板css：
:host ::ng-deep .button-content.blue-label {
cursor: pointer;
font-size: 14px;
letter-spacing: .1px;
line-height: 20px;
font-weight: 500;
text-transform: none;
color:
浏览 2提问于2022-03-20得票数 0
2回答
*ng-deep不适用于嵌套类
、、、、
我试图在父组件中覆盖子组件颜色的样式。我试着做了很多事情，但没有一件是正确地覆盖了孩子最初的造型。
当我只对一个类使用：：ng-深度时，它就能工作了。
:host ::ng-deep class1 {
color: black;
}
但是，当我在嵌套类中使用：：ng-深度时：
:host ::ng-deep class1 .class2 .class3 {
color: black;
}
// OR
:host ::ng-deep class1 {
class2 {
class3 {
color: black;
}
浏览 8提问于2022-01-28得票数 0
1回答
我已经使用角度CLI生成了一个新的组件，它给了我一个HTML文件、CSS文件和一个类型记录文件。在类型记录文件中，我生成一些HTML (两个div)来包装由JS文件生成的一些tweet。
ngOnInit() {
var config = {
"id": '605465000484982784',
"domId": '',
"maxTweets": 3,
"enableLinks": true,
"showUser"
浏览 0提问于2018-02-27得票数 4
回答已采纳
1回答
垫子-选择箭头来转换下拉(上下)
、、、、
我有一个垫-选择下拉图标箭头，它是朝下的，当我点击它会转换它，打开下拉选项，当我再次点击箭头时，它会再次关闭下拉菜单，到目前为止，它关闭了一个选项，当我选择其中一个选项并关闭下拉菜单时，该箭头不会再次朝下，除非我保持单击该选项。
我一直在尝试使用:专注于这一转换，但我似乎没有弄清楚如何使它正常工作。
我使用的是下拉列表： (没有角8中的“垫形场”)。
我的SCSS：
::ng-deep .mat-select-arrow {
border-left: 15px solid transparent !important;
border-right: none !important;
浏览 5提问于2022-07-05得票数 0
1回答
我已经在kendos图书馆工作了一段时间了。我最近做了一个包含标签的模态。选项卡中的内容按要求提供，但问题是我无法更改选项卡标题的文本颜色。文本具有默认的红色。我尝试过很多事情，比如尝试给出风格，ngClass directive.But补充说，没有什么对我有用。我已经看过医生了，但什么也找不到。
请帮帮忙
提前感谢
浏览 0提问于2021-06-03得票数 0
我有一个以"::selection“开头的CSS规则，当我运行它时，它可以在google chrome中运行，但是notepad++说它是一个未知的CSS属性。如何更改notepad++文件以添加此规则和其他规则？
浏览 2提问于2015-06-01得票数 0
我在一个项目上使用此datapicker (范围选择)，导航栏中箭头的蓝色不是正确的，我想要更改它。我在谷歌上搜索，在这里，我没有找到一个解决我的问题的答案。 我有这个HTML： <div id="calenderDisplay">
<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="collapsed"></ngb-da
浏览 21提问于2019-05-03得票数 1
回答已采纳
我应该使用哪个类来设置垫滑动切换的焦点状态的样式？
根据我通过浏览器中的检查可以看出，它可能是类似于::ng-deep .mat-ripple-element .mat-slide-toggle-persistent-ripple的东西，但这不起作用。我已经尝试了ripple的几个变体，但我似乎找不到正确的一个，即使我看的方向是对的。
我想要的是重新着色和缩小下面的粉红色圆圈的直径，我只是不知道如何选择它的SASS。
HTML：
<mat-slide-toggle (change)="onChange($event)">{{ variable-here }
浏览 0提问于2019-03-14得票数 5
我想使用Kendo角DatePicker和将"Toggle日历按钮“移到(浮动工具栏)的其他位置。这就是为什么我不使用DateInput控件的原因。我试图隐藏css输入中的切换按钮，但这是行不通的：
.k-select {
display: none;
}
即使浏览器控制台中的jquery命令有效：
$('.k-select').css('display','none')
我怎么能这么做？我有另一种方式来移动这个按钮。
浏览 0提问于2019-04-23得票数 0
3回答
我已经创建了一个共享组件(<nextgen-table></nextgen-table>)基于Mat-table (角材料)。在项目中使用此组件时，会发现需要更改表列的行为(宽度)。
我已经在我的其他组件(例如X，Y)中导出了nextgen-table，其中nextgen-table当然是一个子组件。
要更改席表中特定列的宽度，我必须使用如下所示：
mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
flex: 0 0 40%;
text-align: left;
}
mat-cell:nth-c
浏览 6提问于2020-03-17得票数 1
回答已采纳
2回答
我用的是角8，用的是scss。
我想改变垫-选择的占位符的颜色。
如果我使用课堂：
::ng-deep .mat-form-field-label {
color: green !important;
font-size: 20px;
}
它可以与任何垫子选择控制工作。
但是，如果我像这样定义一个自定义类：
::ng-deep .customclass .mat-form-field-label {
color: green !important;
font-size: 20px;
}
而html：
<mat-select matNativeCon
浏览 12提问于2022-10-13得票数 0
回答已采纳
1回答
我有一个具有这个文件结构的角组件：
.
|____custom-d3-tree.component.css
|____custom-d3-tree.component.spec.ts
|____custom-d3-tree.component.ts
|____custom-d3-tree.module.ts
|____custom-d3-tree.service.spec.ts
|____custom-d3-tree.service.ts
|____tree.dendo.model.ts
文件tree.denco.model.ts定义：
export class TreeModel {
它实现
浏览 0提问于2019-04-09得票数 4
回答已采纳
1回答
我已经在我的图像视图中实现了库，它正在动态地加载许多HTML组件。我希望更改一些动态加载元素的CSS。
这是我默认拥有的。
呈现前的HTML组件如下所示，
<div class="image-viewer-container">
<app-image-viewer
[images]="[artURL]"
[loadOnInit]="true"
[idContainer]="'idOnHTML'"
[showOptions]="false&
浏览 1提问于2019-10-12得票数 0
回答已采纳
1回答
父HTML
<childComponent class="applyToChild"> </childComponent>
在ChildComponent HTML中
<p>ABCD</p>
<ul>
<li>
<p> XYZ </p>
<li>
</ul>
父组件的.scss (在父组件中应用样式)不会被重新配置
.applyToChild{
p {
font-size:25px;
}
ul
{
浏览 1提问于2022-03-31得票数 0
1回答
这个问题适用于Ionic，但它的答案可能更普遍地适用于CSS。我没有把握。
我使用ionic 4，它创建具有特定样式的阴影DOM元素。我有以下几点：
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
我希望“浮动标签”文本在浮动时比平时更向左移动。我可以用标签本身的样式很容易做到这一点。
但是，在ion-item下创建的阴影DOM div具有
浏览 2提问于2018-10-25得票数 4
1回答
我无法针对这个子组件中的滚动条，在该组件中，我有一个mat-list和2个节，其中定义了高度和overflow-y:auto。
在css文件中，在底部你已经尝试了我所有的目标两个滚动条，找不到正确的选择器！
有人能启发我吗？谢谢
浏览 0提问于2018-08-31得票数 1
回答已采纳
我有一个关于scss和cli的问题: angular在运行时向应用程序标签(组件)添加了一个属性_nghost-fyw-1。同时，它向我的css添加了一个名为_ngcontent-fyw-1的属性选择器，这当然不会起作用。
你知道我该如何改变/避免这种行为吗？
PS:它也适用于常规的css。
我的组件.scss文件如下所示：
my-comp {
h1 {
background-color: red;
}
}
浏览 2提问于2016-06-08得票数 21
回答已采纳
我使用的是在https://material.angular.io/guide/theming-your-components中指定的样式指南 我的组件有一个mat-form-field，我想在其中更改边框颜色。如果我将ng-deep样式放在component.scss文件中，它将被正确地应用，如下所示： :host ::ng-deep {
mat-form-field.active-field .mat-form-field {
&-flex {
border: 2px solid red;
}
}
} 现在，我希望保
浏览 7提问于2020-01-13得票数 0
回答已采纳
2回答
您好，在那里，我正在尝试覆盖材料背景颜色，我已经尝试了不同的方法仍然不能改变它
使用web浏览器上的检查器找到包含我要更改的内容的css
.form-control-wrapper .material-input::before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform:
浏览 4提问于2019-03-14得票数 0
我试图像往常一样删除所有元素的边距和填充，但它似乎在Angular 7中不起作用。
在这里，您可以看到仍然有边距：
我尝试过的：
在全局Styles.sass文件中设置边距和填充为0；
*
margin:0
padding:0
浏览 7提问于2018-12-18得票数 0
回答已采纳
1回答
不能隐藏弹出箭头
、、
我正在构建一个Angular组件 我试图用CSS隐藏引导弹出窗口的箭头，但不起作用。 Html： <button type="button" class="btn btn-link" placement="bottom-right"
[ngbPopover]="popContent">
<fa-icon class="text-white" [icon]="['fas', 'user']" size="lg&
浏览 22提问于2019-12-28得票数 0
回答已采纳
2回答
类在元素检查器中没有显示。
、、、、
如图像和圆圈部分所示，我创建了一个名为clsTest的类。在这个类中，我想改变红色的圆圈元素的位置和一些属性，如图中所示。红色的圆圈元素由输入字段和日历图标组成。当我在chrome中激活元素检查器时，类clsTest从未出现或列出在其他类中。换句话说，如图像所示，类.clr-control-container是显示的，而类clsTest不是！！
请让我知道如何正确分配一个类，并能够修改它的属性，以更改红色的圆圈元素的位置和属性。
html
<clr-date-container class="clsDateContainer">
<la
浏览 9提问于2022-02-02得票数 1
我正在更新一个离子型应用程序，它使用了一个带有复选框的属性名称列表视图。清单中可能有1300个项目。使用包含这么多项的传统列表视图需要很长时间才能打开视图并初始化所有元素，但是列表视图上的格式是正确的。如果名称太长，则在末尾加上省略号。如下图所示。
上述列表视图的代码如下：
<ion-content [fullscreen]="true" class="ion-padding-top">
<ion-list>
<ion-item *ngFor="let property of observablePrope
浏览 14提问于2022-01-04得票数 0
回答已采纳
我试图移除或至少改变p表网格线的颜色。
我试着在浏览器上检查代码，看看是否能够找到创建这些行的元素，但是找不到。
我尝试将样式应用于td和tr，但无法删除网格线。
下面是显示网格线的图像链接：
使用:角11 PrimeNG 11
浏览 25提问于2022-05-29得票数 0
2回答
我用的是角质材料步进器。我需要在移动view.On开发者控制台上设置填充0，我可以通过更改.mat-horizontal-content-container来设置填充0。但是，当我添加.mat-horizontal-content-container{padding:0 !important;}时，它不起作用--这个问题有什么解决办法吗？
浏览 1提问于2019-05-16得票数 7
回答已采纳
我想动态地设置进度条填充值或角材料进度条。
我可以在CSS中使用：
::ng-deep .mat-progress-bar-fill::after {
background-color: red;
}
因为CSS值需要动态设置，所以我不能在CSS中这样做。
我曾尝试使用- (document.querySelector('.mat-progress-bar-fill::after') as HTMLElement).style.background = 'green';，但这会产生ERROR TypeError: Cannot read properties
浏览 3提问于2022-06-21得票数 0
回答已采纳
我的scss项目有以下几行：
:host /deep/ .image-img {
height: 60pt;
}
这个语法是，并且将编译。我不认为在VSCode中对这个语法有任何支持/扩展。因此，Visual代码会有所帮助，并指出以下问题：
scss {预期('18,7')
预期的scss规则或选择器(20,1)
我可以无视这些。毕竟，它是编译的，它只在文件打开时显示这些错误。我确实喜欢VSO代码在编写scss时给我的其他帮助，所以我不打算完全禁用它。
然而，是否有一种方法可以忽略某些行的复杂问题？例如，在t-lint上类似于/* tslint:enable *
浏览 2提问于2017-03-03得票数 2
回答已采纳
2回答
我试图隐藏body (html)滚动条。添加：
body,
html{
overflow: hidden;
margin: 0;
padding: 0;
}
无论是在组件css文件中还是在"app.component.css“中似乎都没有帮助。有什么想法吗？
编辑:将上面的代码添加到"styles.css“文件(通过.Angular-cli.json调用)似乎可以。我仍然很好奇为什么它放在组件或"app- component“css文件中不能工作。
浏览 4提问于2017-07-24得票数 0
1回答
我发现:host在angular中的用法非常混乱。
例如，有一个CSS文件a-component.component.css，它的相关HTML文件是a-component.component.html，它的selector是app-a-component。
在CSS文件中有一条语句
h1 {
font-size: 12px;
}
基于下面的解释，我认为这个CSS只适用于<app-a-component>的HTML元素，对吗？
如果我将CSS更改为
:host h1 {
font-size: 12px;
}
(添加:host)
它仍然适用于相同的HTML元素，因为它是这
浏览 0提问于2021-10-10得票数 1
我使用的是Angular 5的材质设计。我在matInput中发现了非常奇怪的显示问题，在编辑模式下文本(如g)部分隐藏。有趣的是，此行为也存在于Angular材质示例中，请参阅此处：
有什么帮助来解决这个问题吗？
在MacOS (Macbook Pro)上发现问题，并且可以在chrome和safari上重现。
浏览 7提问于2017-12-27得票数 1
1回答
我只想在此组件标记内添加一个样式 <i *ngIf="m.length<=0" >
<ul>
<angular_component
[text]= "main"
[id]="sub"
(deleteIconClicked)="sub_main"
></ngular_component>
</ul> 任何人都可以帮助如何做到这一点，我想添加这样的风格 <i *ngIf=&
浏览 18提问于2020-04-09得票数 0
1回答
我想改变导航链接的样式
这是我在my.component.scss上的尝试
tabset {
a {
.nav-link {
background: #FFFFFF;
border: 1px solid #DDE6FB;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
浏览 4提问于2022-05-05得票数 1
2回答
替代/深/深/
、、、
我想改变ng引导分页组件的样式，并在一个角6应用程序中使用/deep/链接。下面的代码工作正常，但控制台显示的是不推荐使用该代码的警告。
那么，我应该如何改变它以消除警告呢？
下面是我目前使用的CSS代码：
ngb-pagination /deep/ .page-item.disabled .page-link{
background: none;
}
ngb-pagination /deep/ .page-item.active .page-link {
background-color: #223C61;
&:focus, &:visited
浏览 0提问于2018-08-06得票数 10
我将角更新为4.0.0，将chrome更新为62.0.3202.94，得到了以下错误：
CSS中的反推荐/深度/组合器被废弃，并将在M63中删除，大约在2017年12月。有关更多详细信息，请参阅。
并在我的代码中引用clientWidth或clientHeight：
document.getElementById(this.ID).clientWidth;
或者在这里：
document.documentElement.scrollTop = parseInt(sessionStorage.getItem('scrollPosition'), 10);
浏览器是否误解了
浏览 3提问于2017-11-17得票数 5
回答已采纳
1回答
我使用ViewEncapsulation.None覆盖我在登录页面中使用的自定义垫表单字段组件的材料样式。然而，我已经达到了一个场景，在应用程序中，每当我在另一个组件中使用另一个mat-form-field时，在登录页面mat-form字段中使用的一些样式将被继承，留下当前的组件样式没有任何效果。
你能明白我下面的意思。这是我使用第一个mat-form-field的第一个实例
但是，当我再次在另一个组件中使用mat-form-field时，一些样式会被忽略，如下所示：
在现实中，这将是预期的结果：
我能做些什么来覆盖这些继承的样式？
提前谢谢。
浏览 4提问于2021-06-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
