📌  相关文章
📜  如何从Sass元素中仅选择直接子级?

📅  最后修改于: 2021-05-13 20:41:32             🧑  作者: Mango

介绍:
Sass是一种脚本语言,已编译为级联样式表(CSS)。它是一种预处理程序语言。它最初由Hampton Catlin设计,然后由Natalie Weizenbaum开发。在初始版本之后,Weizenbaum和Chris Eppstein继续使用SassScript扩展SASS。它支持四种数据类型,分别是数字,字符串,颜色和布尔值。嵌套也可以使用这种语言。

有关问题的方法:

  • 首先在.html文件中定义内容。
  • 在内容的HTML文件中,请确保您要放置子标签或在父标签中放置子标签。
  • 完成HTML标记后,请在SCSS文件中使用“&”和“>”来设置直接子代的样式。

通过代码实现:

app.component.html:

Welcome to My GeeksForGeeks

  
  

One Stop solution for all the     Computer Science Concepts

  
  

It is reliable and rich     website for students.

  

It even has interview experiences  which gives insights regarding every  company interview

app.component.scss:

div {
    & > p {
       background-color: yellow;
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
  
  
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

输出:

如果您清楚地观察到上述屏幕截图,因为背景色仅应用于直接子级。