如果我使用组件的选择器名称，则样式不会应用于组件
基础概念
在Web开发中，组件选择器是用于指定特定HTML元素的CSS选择器。当使用组件的选择器名称作为CSS选择器时，理论上应该能够将样式应用于相应的组件。然而，如果样式没有正确应用，可能是由于以下几个原因。
可能的原因
- 选择器优先级：可能存在其他具有更高优先级的CSS规则覆盖了你定义的样式。
- 样式作用域：如果使用了CSS模块化或Scoped CSS，样式可能被限制在特定的作用域内。
- 选择器错误：可能选择器的写法有误，没有正确匹配到目标元素。
- 样式未加载：可能相关的CSS文件没有被正确引入或加载。
- JavaScript动态修改：可能在运行时通过JavaScript动态修改了元素的样式。
解决方法
- 检查选择器优先级：
确保你的CSS规则优先级足够高，可以通过增加选择器的特异性或者使用
!important来提高优先级。 - 检查选择器优先级：
确保你的CSS规则优先级足够高，可以通过增加选择器的特异性或者使用
!important来提高优先级。 - 检查样式作用域： 如果使用了CSS模块化或Scoped CSS，确保样式定义在正确的作用域内。
- 检查样式作用域： 如果使用了CSS模块化或Scoped CSS，确保样式定义在正确的作用域内。
- 检查选择器错误： 确保选择器正确匹配到目标元素。
- 检查选择器错误： 确保选择器正确匹配到目标元素。
- 检查样式加载： 确保相关的CSS文件被正确引入和加载。
- 检查样式加载： 确保相关的CSS文件被正确引入和加载。
- 检查JavaScript动态修改： 如果使用了JavaScript动态修改样式，确保这些修改不会覆盖你的CSS规则。
- 检查JavaScript动态修改： 如果使用了JavaScript动态修改样式，确保这些修改不会覆盖你的CSS规则。
应用场景
这种情况常见于前端框架（如React、Vue、Angular）中，当使用组件化开发时，样式可能会因为上述原因而无法正确应用。
参考链接
通过以上方法，你应该能够找到并解决样式未应用于组件的问题。
相关·内容
1回答
我想从数据库中添加html内容(这样页面内容的一部分就可以外部更改)。
如何添加SCSS样式？我像这样使用，但是我不知道如何添加样式：
<div v-html="ct"></div>
async created() {
this.ct = await this.getPage("blabla");
}
我不喜欢在vuejs样式中添加SCSS部分，我已经为代码的另一部分添加了一些其他CSS，但如果有必要，可以在这些资产中定义样式。
<style lang="scss" scoped>
@impor
浏览 7提问于2020-09-25得票数 1
回答已采纳
我对host的理解是，如果我在父组件中有一个子组件，并且我们想从父组件设置一个子组件的样式，我们可以使用:host。和:host-context，反之亦然。请让我知道这是否是主机的正确使用。
当我尝试在我的应用程序中执行相同的操作时，它不起作用
应用组件模板
<div class ="top">
<h1>
Home Component
</h1>
<hr>
<app-ngrx></app-ngrx>
<router-outlet><
浏览 0提问于2017-03-04得票数 8
回答已采纳
我正在尝试更改outline的mat-form-field颜色。
:host /deep/ .mat-form-field-appearance-outline :host /deep/ .mat-form-field-outline {
color: white;
}
然而，这是行不通的。使用:host似乎是个问题，因为以下操作很好：
/deep/ .mat-form-field-appearance-outline /deep/ .mat-form-field-outline {
color: white;
}
但是，如果我不使用:host，这种样式也将应用于其他组件。我
浏览 1提问于2019-07-06得票数 0
回答已采纳
2回答
我正在建立一个一般的搜索栏在一个网页的标题。它的配置和工作良好，但我有一个小问题，试图对它的风格。
目前的情况如下：
我想让它看起来更光鲜一点，像这样：
我很好的形状和位置的输入框，但我想对齐图标和占位符文本居中的框，而不是拥抱顶部和触摸边框。
下面是我正在使用的html：
<md-input-container _ngcontent-c5="" color="accent" floatplaceholder="never" ng-reflect-color="accent" ng-reflect-flo
浏览 5提问于2017-06-05得票数 5
回答已采纳
我是新的角度，只是一个应用阴影DOM CSS选择器的问题。下面是一些伪代码：
//root template.html
<div id="first">
<div id="second">
<paProductForm ..."></paProductForm>
<div>
</div>
其中paProductForm是我的自定义组件的选择器，如：
@Component({
selector: "paProductForm",
浏览 6提问于2019-11-06得票数 0
如果组件有一个类active，我想对它进行样式化。但不起作用。
thread.component.html
<div>thread works!</div>
thread.component.css
:host .active {
display: block;
border: 1px solid white;
}
app.component.html
<app-thread class="active"></app-thread>
但是，如果我删除app.comonent.html文件和thread.compone
浏览 6提问于2017-09-08得票数 16
回答已采纳
2回答
组件作用域样式-如何根据其在站点中的位置对事物进行不同的样式设置，但仍然保持样式的作用域？假设我使用我们在这门课程中建造的“心脏样”项目，我希望左边有很多填充，但只有当我把这个组件嵌套在built...but的推特列表中时，我才不想要这个填充--如果我在其他地方有这个心脏组件--那么最好的方法是什么呢？每个场景的样式能否仅限于此组件？？
/*
style below are in the heart.styles.css
so these are scoped to heart component.
This acts like global style for this component
浏览 3提问于2016-06-02得票数 2
回答已采纳
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回答
在我的fxml中，我有css的url (这个fxml是通过SceneBuilder创建的)
<AnchorPane>
...
<stylesheets>
<URL value="@../styles/test.css" />
</stylesheets>
</AnchorPane>
和test.css包含
.root{
...
}
如果我在SceneBuider中做预览，一切都没问题。但是在运行时，这种风格是不适用的。我将定义更改为
#AnchorPane{
...
}
这样，无论是在预览还是
浏览 0提问于2014-11-10得票数 1
1回答
不知道为什么StyledComponents中按钮上的悬停效果代码在React应用程序中不起作用。你能看看密码吗？谢谢！
export const StyledButton = styled.button`
width: 12vh;
background-color: ${colors.buttonColor};
-webkit-box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
height: 4vh;
浏览 1提问于2021-06-06得票数 0
回答已采纳
2回答
指定输入类型名称？
、、、
我在做一份联系表格。显然，我希望消息框大于电子邮件和主题输入框。所以很明显，我不能只在css中输入，因为它会改变所有的框。我以为指定消息框会出现这样的情况
input [type="text" name="message"] {
padding-bottom: 500px;
}
那显然不管用..。那我做错什么了？
<div id="contactContent">
<form>
<label>Email:</label><input type="text" nam
浏览 3提问于2013-05-17得票数 1
回答已采纳
1回答
由于某些原因，我的元素样式在使用作用域时不起作用。在检查元素时，在使用范围时不应用样式。我需要使用作用域，因为我只想在这个组件中应用样式。我正在使用nuxt.js，不知道这是否与问题有关。
不起作用：
<style scoped>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
工作：
<style>
a {
color: red !important;
tex
浏览 0提问于2019-07-13得票数 2
回答已采纳
2回答
在过去的两个小时里，我一直在挠头，为什么这个第三方风格的组件没有添加I it .have一个外观 import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
@media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}&
浏览 28提问于2020-04-15得票数 1
回答已采纳
我们将许多Hawtio (作为.war文件)部署到JBoss Fuse / Karaf服务器上。我们注意到，由于我们在为HTML元素重复一些类名和id名，所以插件A的CSS行为会影响另一个插件插件B的样式，特别是当我们引用col-lg-12等特定于引导程序的名称时。此外，即使插件A中没有打包的bootstrap.css文件，我们也可以使用引导类行为，这似乎是从插件B的bootstrap.css文件中引用的。我们意识到ids和classes对于整个Hawtio环境来说是全局的(我们不知道是否仅仅在CSS中才会出现这种情况)。关于如何补救这个问题有什么建议吗？
谢谢。
浏览 2提问于2014-12-12得票数 0
回答已采纳
2回答
因此，我刚刚创建了一个扩展面板，它运行良好(它是非常硬编码的)。但是，我需要从子面板部分完全消除一个填充，我找不到合适的方法来完成它。
这是一个小组：
你可以注意到有一个白色的边框，我想消除(在检查，在div.mat-展开面板-身体部分，有一个填充。当我将其设置为0时，它将修复，白色边框消失。然而，我在我的.css中尝试了以下几点：
div.mat-expansion-panel-body {
padding: 0 !important;
}
但没起作用。如果有人有办法解决这个问题，我将不胜感激。
浏览 3提问于2022-02-07得票数 0
1回答
通常，当我创建一些HTML模板时，我倾向于给所有内容加上前缀和类(或id)，这是我保持标记可读性的一种方式，也使得样式设计变得容易得多。
例如，如果创建一个名为MyTemplate的模板，那么我将为所有元素添加前缀，如下所示
<form id="mt-form-blue" class="mt-form">
<input class="mt-input-large" type="text" />
<input class="mt-input-small" type=
浏览 1提问于2014-08-06得票数 0
我使用的是ngPrime组件，如果我对它们进行样式设置，样式不是应用在dashboard.component.sass文件上，而是在我使用全局style.sass文件时应用。
dashboard.component.html文件
<p-dropdown [options]="reports" styleClass="report-dropdown">
<ng-template let-item pTemplate="selectedItem">
<i class="fas fa-t
浏览 0提问于2018-03-28得票数 4
回答已采纳
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
回答已采纳
我正在使用两个ng-bootstrap组件ngbDropdown和ngb-pagination，我希望它们彼此垂直对齐。
ngb-pagination组件使用.pagination类创建此HTML语言，边距为1rem
<nav>
<ul ng-reflect-class-name="pagination pagination-sm" class="pagination pagination-sm">
</ul>
</nav>
我尝试用我的Angular 2组件修改这个类，如下所示。
@Compon
浏览 0提问于2016-12-28得票数 6
在不使用选择器(button {})指定/包装的情况下，以下styled-jsx样式声明将起作用。按钮的样式很合适，这很棒。然而，像这样的用法在网站上没有记录，所以我想知道这种语法是否得到了官方的支持，并且可以安全地使用？
<button>
<style jsx>{`
background-color: red;
:hover {
background-color: #ccc;
}
`}
</style>
Test
</button>
另一个例子，使用resolve标签也是有效的：
const
浏览 0提问于2019-05-07得票数 2
我们有一个相当大的项目，几乎所有的CSS内部组件。我们需要为小部件生成RTL样式，并尝试使用。当我们尝试这样做时，postcss-rtl添加的[dir]属性前缀使用_ngcontent...选择器作为后缀。我们需要停止它，这样CSS才能像预期的那样应用于html。
// Current output
[dir][_ngcontent-c30] .total-deposit_value[_ngcontent-c30] {
margin-top: 5px;
}
// Expected output
[dir] .total-deposit_value[_ngcontent-c30] {
浏览 4提问于2018-08-03得票数 1
我使用的是引导vue组件，b选项卡在safari浏览器中单击后显示大纲蓝色焦点边框，它与chrome和Mozilla一起工作很好。
我试过了
*:focus {outline:none !important}
浏览 2提问于2019-07-27得票数 2
回答已采纳
我正在使用richfaces组件。我正在使用引导进行样式设计。
在web.xml中，我要添加
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.skin<
浏览 3提问于2015-01-03得票数 0
我是css编码的新手。我有一个网站，但在Wordpress和Elementor。我正在尝试使用css更改单个元素的文本颜色。我找到了在nav中为这个元素指定的类。我可以改变它的背景颜色，字体粗细等，但我不能改变文本颜色。有没有想过为什么？
浏览 2提问于2021-01-23得票数 0
我需要向全局样式表中的组件选择器添加一些样式属性，但添加的样式不会影响浏览器中的选择器元素。如何完成此操作以影响组件选择器元素上的样式。
我的组件文件
@Component({
selector: 'admin-dashboardwidgets',
templateUrl: './dashboardwidgets.component.html'
})
Mys样式表文件
admin-dashboardwidgets {
width: 100%;
height:500px;
background: red;
}
提前感谢
浏览 3提问于2018-03-02得票数 0
我正在创建一个指令来调整应用它的元素的类。但是，该类的样式在类更改时不适用。例如：
Form.svelte
<form id='sign-in' use:delayed={ handleSubmit }>
<label for='sign-in-name'>Your Name</label>
<input required id='sign-in-name' type='text' />
<input type='submit' value=
浏览 1提问于2019-12-06得票数 0
回答已采纳
尝试改变antd旋转点样式，它可以用CSS实现，但在我的项目中不允许使用)。作为我对前端的新手，不知道正确的解决方案。
下面是代码示例
(预先谢谢:)
浏览 1提问于2020-12-12得票数 2
2回答
我一直在试着调整剑道下拉框的尺寸。我也选了一个单独的类和Id来做适当的填充，但没有结果。在浏览器中，我也尝试检查并做了一些修改，当涉及到编辑器时，我复制了代码并将其放入编辑器中，而我在浏览器中所做的更改最终导致无法进行适当的填充。
我的HTML代码：
<div class="col-lg-4">
<kendo-dropdownlist [data]="UsersInfo" value="Count of Users by Month"
class="usersdropdown" (selectionChan
浏览 13提问于2022-01-19得票数 0
回答已采纳
4回答
我试图隐藏MatPaginator自动添加的字符串(每页条目:1-1，2)，我尝试通过将display:none;或display:none !important;设置为容器类来执行CSS，但这没有奏效：
.mat-paginator-page-size{
display: none !important;
}
.mat-paginator-range-label{
display: none !important;
}
我只希望下一个和以前的箭头出现，没有任何其他细节。
浏览 7提问于2020-06-15得票数 3
回答已采纳
我的html元素有以下样式：
html {
font-size: 16px;
font-family: "Harmonia Sans Regular" !important;
}
但即使使用!important，我的字体样式仍然会在输入等内容中被覆盖。
为什么？我认为继承样式胜过用户代理样式？
浏览 353提问于2018-10-24得票数 5
回答已采纳
我试图移除或至少改变p表网格线的颜色。
我试着在浏览器上检查代码，看看是否能够找到创建这些行的元素，但是找不到。
我尝试将样式应用于td和tr，但无法删除网格线。
下面是显示网格线的图像链接：
使用:角11 PrimeNG 11
浏览 25提问于2022-05-29得票数 0
for :host没有提到我们可以同时设置所有主机元素的样式。我在“全局”级别添加了这个CSS：
:host {
width: 100%;
}
但没有效果。但是，这在组件级的CSS中工作得很好：
:host(app-search) {
width: 100%;
}
其中app-search是一个组件，app-search.component.ts。
是否可以为所有组件编写:host选择器，还是必须在组件级别上多次声明？
浏览 0提问于2018-07-27得票数 1
回答已采纳
2回答
我有一个相当基本的组件，它将消息传递给用户：
...
let dialogRef = this.dialog.open(
UserMessagingDialog,
{
data: {
'messages': this.messagesToShow,
'messageColors': this.messageColors,
'messageI
浏览 4提问于2017-07-11得票数 1
回答已采纳
1回答
用于带工艺路线的角度的材料组件
、、、、
我正尝试在我的angular 4.3应用程序中使用Angular ()的材质组件。我已经安装了所有的东西，并且在我的app.component.html文件中添加了一个按钮，这个按钮被渲染了，并且像这里的一样工作。
然后，我尝试在我的一个路由中添加一个按钮，但该按钮呈现的效果并不相同。这就像是引导css已经接管了一切。
我必须在要路由到的组件中导入任何内容吗？
浏览 0提问于2017-11-14得票数 1
我不确定我是否理解styleURLS在角度上的用途。
我所有的scss文件都编译成一个大的css文件，整个应用程序指向那个css文件。因此，使用角分量生成的html将查看它，以便为正确的类获得正确的样式。
但是，我也可以直接向组件提供styleURL属性，在这种情况下，组件指向scss文件。
这似乎应该更有效率，但我不知道情况确实如此。
浏览 6提问于2020-06-23得票数 0
回答已采纳
2回答
我正在尝试更改md-menu的默认角度材质样式。问题是Angular材质动态地生成元素，而我无法从我的HTML访问它们。
这是我的DOM：
下面是我的组件超文本标记语言(md-menu生成DOM)：
<md-toolbar color="primary">
<h1>Logo</h1>
<span class="spacer"></span>
<img src="../../../images/avatar-default.png" class="ava
浏览 0提问于2017-07-09得票数 0
回答已采纳
1回答
我开始学习带有情感js的css。
有谁能告诉我在
const Component = Styled('div')`
color: 'red'
`;
和
const Component = () => (
<div className={css`color: red`}/>
)
它是某种形式的帮助者还是css的简写？
有什么建议什么时候使用哪一种？
看起来所有样式都可以做，可以用css + cx代替。
浏览 1提问于2018-06-22得票数 1
我正在尝试将display: flex属性应用于我的<span>的父<div>
但是，由于is是由ng-template的ngx-datatable-column生成的，所以我无法在html中应用它。
我尝试添加一个样式属性，尝试使用headerClass到ng模板，但它没有工作。
这就是我的html如何处理它的呈现。
我想将css类或样式属性添加到图像中指出的位置。
在呈现之前，这是我的html
有人能帮我在图像中指出的<div>中添加一个css类吗？
浏览 2提问于2022-04-27得票数 0
1回答
在CSS中使用命名空间时，例如，您可以通过使用命名空间类型选择器来选择"any or no namespace“中的任何div元素：
*|div
命名伪类是有效的CSS吗？例如：
*|:first-child
它似乎可以在基于WebKit的浏览器中工作，但在IE9 (下面的IE9完全不支持名称空间)和火狐浏览器中似乎不能工作。我不关心它在什么浏览器上工作/不工作，我只需要知道它是否是一个有效的构造。
。
从我在中可以看出，它是无效的。但我可能读错了语法。
浏览 3提问于2012-06-22得票数 4
回答已采纳
我正在使用引导vue创建下拉列表，但是我不能在其上应用范围样式，因为主按钮是在没有"data-v-XXX“属性的情况下创建的。
有什么解决办法吗？
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdo
浏览 0提问于2018-11-18得票数 2
回答已采纳
我有一个相当麻烦的经验与PrimeNG，因为我根本不能应用任何类型的CSS，任何.而这种情况发生在卡片组件、dropwodnw、multislect等方面。我最近的问题是一个下拉式，不会接受宽度100%。我试过class=“等”、“styleClass=”等、“id=”等。我见过这个很深的人但是.每次我想要做最细微的改变时，我都要称它为“深？”？
另一个问题，我该怎么处理这个东西？
我试着用我能想象到的每一种方式给这些家伙打电话.但什么都没发生..。也许我就是那个蠢哈哈..。
我怎么能让这个家伙接受一个宽度:15瑞姆；例如.？
<span class="p-float-
浏览 5提问于2022-07-05得票数 0
规则在单个css文件中的顺序是否会有所不同？
<div id="wrapper>
<div id="a>
section a
</div>
<div id="b>
section b
</div>
<div id="c>
section c
</div>
</div>
#c的div规则是否需要低于#a和#b，或者是否会清楚:两者都不起作用？
#wrapper {
color
浏览 2提问于2009-10-21得票数 6
关于这个柱塞：
我在styles.css文件和src/app.ts文件中指定了相同的css。
如果我在styles.css中的css中注释，而在src/app.ts中注释掉css，它就能工作。
styles.css：
/* If these are commented in, and the ones in src/app.ts are
* commented out, the three items are spaced appropriately. */
/***
md-toolbar-row {
justify-content: space-between;
}
md-t
浏览 1提问于2017-09-04得票数 0
回答已采纳
我有一个相当奇怪的问题。我有一个上面有QHBoxLayout的QWidget。布局包含两个QLabels。我想为整个小部件设置一个边框。我正在使用样式表：
"padding: 10px;"
"border-style: solid;"
"border-width: 3px;"
"border-radius: 7px;"
但这里有一个问题:这种样式适用于这两种QLabels，并且完全破坏了布局。我只需要外部窗口有边界，而不是标签。有什么想法吗？
提前感谢！
浏览 0提问于2011-10-25得票数 8
回答已采纳
这个问题可能已经有答案了，因为我已经看到了一些，但这些问题并没有帮助我解决这个问题。我的问题是ngx中的rowClass -datatable不适合我。
数据表代码- test.component.html
<ngx-datatable class="material"
[rows]="rows"
[columnMode]="'force'"
[reorderable]="reorderable"
[rowC
浏览 1提问于2018-03-28得票数 8
回答已采纳
2回答
我刚开始学习“反应”( React )，想要克服我在这个中遇到的最后一个障碍，我有点困惑。在用户单击“检查他们的答案”之后，我遇到了一个问题，目前，我已经将用户选择的答案正确地显示为“绿色”，但是如果他们的回答不正确，我就无法让用户回答显示“绿色”，而让正确的答案显示“红色”。我试图在JSX中为它创建一个条件样式，在那里我将在应答数组上映射并返回一个按钮，但这不起作用(它会将它们全部着色)。
下面是我创建的一个沙箱的链接：
浏览 10提问于2022-10-26得票数 0
回答已采纳
我按照Udemy的路线倾斜角度，我有这样的风格：
server dl {
display: flex;
}
和server组件，而且它不能工作。样式不应用于html。因为生成的样式如下所示：
server[_ngcontent-c1] dl[_ngcontent-c1] {
display: flex;
}
DOM看起来是这样的：
<server _ngcontent-c0="" _nghost-c1="">
<dl _ngcontent-c1="">
<dt _ngcontent-c
浏览 0提问于2019-01-13得票数 2
回答已采纳
我使用的是NextJs，我使用的是TailwindCSS，在我的globals.css中有一堆额外的样式，这些样式按照你应该做的那样导入到了_app的顶层。我试着将它移到我的“布局”组件中，但它给出了错误，将它放回顶部，所以我将其保留在那里。
这是问题所在。我有一个组件，其中我不需要任何globals.css样式，只需要一小部分替代样式。有没有办法做到这一点？我想删除所有的垃圾，我被迫在顶层导入，然后只应用一个特定的样式表到该组件。
浏览 3提问于2021-01-30得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
