javascript - CSS 样式未应用于 innerHTML

我在 TS 文件中使用 innerHTML 显示一个 bootstrap 卡片，但样式没有应用到该内容。我觉得可能是因为样式在组件显示卡片之前就加载了，所以样式不起作用，有什么建议吗？我使用的是 Angular 12

我的 TS 代码：

    constructor(private _route: ActivatedRoute, private router: Router) {

    this.noticias = [
      {
        id: '1',
        vTitulo: 'Convención anual de la Asociación Mexicana de Semilleros (AMSAC)',
        dFecha: 'DIC 2021'
      },
      {
        id: '2',
        vTitulo: 'El “Arroz Auténtico Americano”',
        dFecha: 'DIC 2021'
      },
      {
        id: '3',
        vTitulo: 'Se incrementa balanza comercial agroalimentaria',
        dFecha: 'DIC 2021'
      },
      {
        id: '4',
        vTitulo: 'Ciencia e innovación en el campo, clave para evitar escasez de alimentos en 2050: Bayer',
        dFecha: 'DIC 2021'
      },
      {
        id: '5',
        vTitulo: 'Corteva es reconocido por “Mejor programa de voluntariado”',
        dFecha: 'DIC 2021'
      }
    ]

     
     $.when( $.ready ).then(() => {
      
      const noticiasList = document.getElementById('noticiasList');

      let displayNoticias = (noticias: any[]) => {
        const htmlString = noticias
          .map((noticia) => {
            return `
              <div class="card cardNoticias">
                <div class="d-flex position-absolute top-0 end-0">
                  <h5 class="mb-0 fecha text-uppercase">${noticia.dFecha}</h5>
                </div>
                <div class="card-body card-body-noticiasList text-center d-flex align-items-center justify-content-center">
                  <h4 class="card-text fw-bold mt-3">${noticia.vTitulo}</h4>
                  <a href="" class="stretched-link"></a><!--Dentro del href se pondria el link hacia el articulo-->
                </div>
              </div>  
            `
          })
          .join('');
        
        if(noticiasList) noticiasList.innerHTML = htmlString;  
      }


      let filtradoNoticias = this.noticias.filter((noticia) => {
        return (
          noticia.vTitulo.toLowerCase().includes(this.busqueda.toLowerCase())
        );
      })
      displayNoticias(filtradoNoticias); 
      
     }) 
  }

这是我显示 innerHTML 的地方

<div class="col-lg-12 ms-2 ps-lg-3 pe-lg-2 mt-2 mt-xl-2 mb-5">
    <h1>NOTICIAS ENCONTRADAS</h1>
    <div id="noticiasList">
      
    </div>
  </div>

以及我想应用到卡片上的样式

.noticiasList .cardNoticias{ 
  background-color: gray; 
}

.noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

基本上，ts 获取用户想要查找的字符串，然后过滤新闻的标题，并显示标题中包含该字符串的新闻

答案＃1

noticiasList 是元素的 ID，而不是分配给元素的类。

因此，要在 CSS 中引用那个 div，你可能想使用 # 选择器（用于 ID）。

所以你的 CSS 代码片段最终会是这样的：

#noticiasList .cardNoticias{ 
  background-color: gray; 
}

#noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

欲了解更多信息，请查看 https://www.w3schools.com/cssref/sel_id.asp