正文 

当前位置： 首页 > 问答 >

CSS：将 CSS 样式应用于除 Material Angular 之外的所有内容

     2023-03-05     138

关键词：

【中文标题】CSS：将 CSS 样式应用于除 Material Angular 之外的所有内容【英文标题】：CSS: Apply CSS Style to Everything except Material Angular 【发布时间】：2020-11-23 23:16:39 【问题描述】：

如何将 CSS 样式（justify-content: center 或 box-sizing: border-box 应用于所有子元素和孙子元素，除了任何 Material 且以

我们实际上将有 500 多个元素，需要有效地应用它。 注意到进入 Material 的孙子内部元素，并应用边框或中心可能会破坏它的显示。

是否有我可以应用的 mat 关键字搜索？有很多mat div元素，mat-input, mat-select, mat-tab, etc

尝试应用 css 起始选择器，

https://www.w3schools.com/css/css_attribute_selectors.asp

.container *not(%.mat) 
    box-sizing: border-box



<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>

【问题讨论】：

【参考方案1】：

我想你可以尝试在之后重置它。

你可以使用你的选择器

.container * 
  display:flex;

然后添加mat-input的前一个值

.container * 
  display:flex;

.mat-input 
  display:flex; /* or whatever it was previously */

【讨论】：

看看，不确定他们是在 flex 还是 bordersize，想恢复【参考方案2】：

不是您正在寻找的确切解决方案，并且假设您有不同的以“mat”开头的元素，而不仅仅是mat-input，我会为所有元素添加一个类，并使用:not 关键字。比如：

.container *:not(.mat) 
    display:flex;



<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input class="mat"><mat-input>

在this jsfiddle 中可以看到一些视觉效果。

如果你只有少量的“mat”元素，你也可以多次使用:not关键字，比如：

.container *:not(mat-input):not(mat-output) 
    display:flex;



<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>
    <mat-output></mat-output>

【讨论】：

有趣，我可以做一个mat关键字搜索，而不是列出所有的mat元素吗？ 在 not 运算符的the documentation 中，我看不到默认的方法【参考方案3】：

好吧，您想要的是一种非常糟糕的解决方法，因为它使您的样式难以维护并且可能导致意外问题，但是，您可以使用此 css 将 box-sizing 属性设置为除那些以mat-开头。

.container *:not([class^="mat-"]) 
  box-sizing: border-box;

【讨论】：

【参考方案4】： 
.container *:not([class^="mat"]) 
    background: red;

这就是您可能要搜索的代码。

[class^="mat"] 将匹配任何具有以mat 开头的类的元素。

[class*="mat"] 将匹配在类名中任何位置具有mat 的任何元素。

根据你的情况使用其中任何一个。

【讨论】：

我建议使用“mat-”而不是“mat”。【参考方案5】：

正如您要求的 SCSS 解决方案。在这个例子中，我使用了 SASS List 和 @each

$matList: input, select, tab; /* list of `mat-`s */
$notList: ""; /* empty variable */

/* adding :not() statmant for each $matList item */
@each $not in $matList 
  $notList: $notList + ':not(mat-#$not)';


/* gets the result of $notList */
.container *#$notList 
  box-sizing: border-box;

无论如何，您仍然需要在 $matList 中插入 mat- 标签列表（仅在“-”之后的部分），但形式要容易得多。否则，您将不得不使用 JavaScript 来获取所有 map- 元素的列表。

编译后得到

.container *:not(mat-input):not(mat-select):not(mat-tab) 
  box-sizing:border-box;

【讨论】：

【参考方案6】： 
.container *:not([class^="mat-"]),
.container *:not([class*=" mat-"]) 
    background: red;

这将匹配类列表以“mat-”开头的所有元素，以及类列表包含“mat-”的元素。例如，该空间对于避免意外定位“格式”类很重要。

【讨论】：

如何将 CSS3 过渡应用于除背景位置之外的所有属性？

】如何将CSS3过渡应用于除背景位置之外的所有属性？【英文标题】：HowdoIapplyCSS3transitiontoallpropertiesexceptbackground-position?【发布时间】：2012-05-2304:19:52【问题描述】：我想对除背景位置之外的所有属性应用CSS过渡。我试着这样做... 查看详情

ReactJS material-ui TextField 应用 css

】ReactJSmaterial-uiTextField应用css【英文标题】：ReactJSmaterial-uiTextFieldapplycss【发布时间】：2018-04-2922:54:00【问题描述】：我正在使用Material-ui和Reactjs。我想使用css在TextField上应用一些自定义样式。具体来说，我想在单击输入时更改T... 查看详情

如何在 JS 中使用 CSS 实现嵌套悬停样式、Material UI

】如何在JS中使用CSS实现嵌套悬停样式、MaterialUI【英文标题】：howtousecssinJSfornestedhoverstyles,MaterialUI【发布时间】：2020-01-0303:05:30【问题描述】：我正在使用MaterialUI并尝试将普通的css类转换为js文件。.navlist-style-type:none;margin:0;padd... 查看详情

material-ui 按钮颜色不会通过 css 样式改变

】material-ui按钮颜色不会通过css样式改变【英文标题】：material-uiButtoncolorwon\'tchangethroughcssstyling【发布时间】：2021-08-0108:03:38【问题描述】：我刚刚学习了react和react-ui的基础知识，当我尝试更改material-ui按钮的颜色时，除非我使... 查看详情

如何使用样式组件覆盖material-ui css？

】如何使用样式组件覆盖material-uicss？【英文标题】：Howtooverridematerial-uicsswithstyledcomponent?【发布时间】：2021-09-1518:35:27【问题描述】：我还是ui-material的初学者。我想用styled-component自定义我自己的按钮组件。问题是根据按钮变... 查看详情

Angular Material mat-expansion-panel-body 样式未应用

】AngularMaterialmat-expansion-panel-body样式未应用【英文标题】：AngularMaterialmat-expansion-panel-bodystylenotbeingapplied【发布时间】：2019-04-1105:12:56【问题描述】：我的组件的css文件中有以下css：.mat-expansion-panel-bodypadding:0;而且，所以我希望... 查看详情

将一个 CSS 样式应用到另一个 CSS 样式

】将一个CSS样式应用到另一个CSS样式【英文标题】：Applyacssstyletoanothercssstyle【发布时间】：2014-04-2300:35:25【问题描述】：我在Wordpress模板上使用Bootstrap。我想改变“more-link”类的样式，我想给它.btnbootstrap类的样式。据我所知，... 查看详情

使用 CSS API 在 Material UI Stepper 中覆盖 CSS 样式

】使用CSSAPI在MaterialUIStepper中覆盖CSS样式【英文标题】：OverridingCSSstylesinMaterialUIStepperwithCSSAPI【发布时间】：2018-12-2605:09:20【问题描述】：我想更改MaterialUIStepIcon中的文本颜色（实际上是一个SVG图标），仅用于活动和已完成的步... 查看详情

将 CSS 样式应用于子元素

】将CSS样式应用于子元素【英文标题】：ApplyCSSStyletochildelements【发布时间】：2010-10-1212:55:18【问题描述】：我只想将样式应用于具有特定类的DIV内的表：注意：我宁愿为子元素使用CSS选择器。为什么#1有效而#2无效？1：div.testth,d... 查看详情

css样式

采用web标准目的：将内容与样式分离web标准：结构标准html5表现标准css行为标准jscss应用方式　　1.内联样式表将样式直接写入标签<pstyle="color:red"/>应用于一个标签 　　2.嵌入式样式表使用标签嵌入到head当中<styletype="text/cs... 查看详情

我可以将 CSS 样式应用于元素名称吗？

】我可以将CSS样式应用于元素名称吗？【英文标题】：CanIapplyaCSSstyletoanelementname?【发布时间】：2011-07-2500:51:54【问题描述】：我目前正在开展一个项目，我无法控制我应用CSS样式的HTML。而且HTML没有很好地标记，因为没有足够的... 查看详情

在 Material UI 中通过样式化 API 使用多个 CSS 规则名称

】在MaterialUI中通过样式化API使用多个CSS规则名称【英文标题】：UsingmultipleCSSrulenameswiththestyledAPIinMaterialUI【发布时间】：2021-03-2901:25:45【问题描述】：我正在使用MaterialUI，我想使用多个带有styledAPI的规则名称来设置组件的样式... 查看详情

根据子元素将CSS样式应用于元素[重复]

】根据子元素将CSS样式应用于元素[重复]【英文标题】：ApplyCSSstylestoanelementdependingonitschildelements[duplicate]【发布时间】：2011-01-2013:19:13【问题描述】：是否可以为元素定义CSS样式，仅在匹配元素包含特定元素（作为直接子项）时... 查看详情

如何将 css 样式应用到 iframe 内容中？ [复制]

】如何将css样式应用到iframe内容中？[复制]【英文标题】：Howtoapplyingcssstyleintoaniframecontent?[duplicate]【发布时间】：2013-03-2615:07:12【问题描述】：我正在尝试为iframe中的内容应用CSS样式，请查看此链接http://jsfiddle.net/pPqGe/jQuery:$(docu... 查看详情

CSS 特性如何决定应用哪些样式？

】CSS特性如何决定应用哪些样式？【英文标题】：HowdoesCSSspecificitydecidewhichstylestoapply?【发布时间】：2012-02-2608:40:15【问题描述】：CSS如何确定何时将一种样式应用于另一种样式？我经历过几次W3CSS3selectorsdocument，这有助于我了解... 查看详情

如何使用 $(element).css(styles) 将多个样式应用于 div？ [复制]

】如何使用$(element).css(styles)将多个样式应用于div？[复制]【英文标题】：Howtoapplymultiplestylestoadivbyusing$(element).css(styles)?[duplicate]【发布时间】：2017-05-1410:52:36【问题描述】：我必须对一个div应用多种样式，我的代码如下：$(".myDiv"... 查看详情

将边距应用于除 iframe 之外的所有内容

】将边距应用于除iframe之外的所有内容【英文标题】：Applymarginstoallbutiframe【发布时间】：2010-09-2405:24:59【问题描述】：我有一个使用“cssa”的“页面a”。此页面在css中设置了边距。我还有一个使用“cssb”的“pageb”。此页面... 查看详情

停止将 CSS 'a' 样式应用于链接的图像

】停止将CSS\\\'a\\\'样式应用于链接的图像【英文标题】：StopCSS\'a\'stylesbeingappliedtoimagesthatarelinked停止将CSS\'a\'样式应用于链接的图像【发布时间】：2013-04-1509:51:18【问题描述】：我被指示让网站上的链接具有与字体颜色不同的颜... 查看详情