CSS 代码在组件 CSS 中不起作用，但在 style.css 和 Angular 中起作用

Question

我有一个文件在 angular 中使用嵌套复选框。我创建了一个组件并将以下代码放入 ngOnInit() 主体

    const mainUl = document.getElementById('siteDetail');
    mainUl.classList.add('ulClassStyle');
    const names = ['Laptops', 'TVs', 'Microphones'];
    const secondLi = document.createElement('li');
    secondLi.classList.add('liClassStyle');
    const secondSpan = document.createElement('span');
    secondSpan.classList.add('caret');
    const secondMaincheckbox = document.createElement('input');
    secondMaincheckbox.type = 'checkbox';
    secondMaincheckbox.id = 'secondOption';
    secondMaincheckbox.checked = true;
    const secondMainlbl = document.createElement('label');
    secondMainlbl.id = 'label';
    secondMainlbl.htmlFor = 'secondOption';
    secondMainlbl.classList.add('labelClassStyle');
    secondMainlbl.appendChild(document.createTextNode('Electronics'));
    secondSpan.appendChild(secondMainlbl);
    secondLi.appendChild(secondMaincheckbox);
    secondLi.appendChild(secondSpan);

    const secondSubUl = document.createElement('ul');
    secondSubUl.classList.add('ulClassStyle');

    for (let i = 0; i < names.length; i++) {
        const name = names[i];
        const secondSubLi = document.createElement('li');
        secondSubLi.classList.add('liClassStyle');
        const secondSubCheckbox = document.createElement('input');
        secondSubCheckbox.type = 'checkbox';
        secondSubCheckbox.name = 'name' + i;
        secondSubCheckbox.value = 'value';
        secondSubCheckbox.id = 'secondSubCheckboxid' + i;
        secondSubCheckbox.checked = true;
        secondSubCheckbox.onclick = function() { secondMyfunction(this); };
        secondSubCheckbox.classList.add('secondSubOption');
        secondSubLi.appendChild(secondSubCheckbox);
        secondSubLi.appendChild(document.createTextNode(name));
        secondSubUl.appendChild(secondSubLi);
        secondSubUl.classList.add('nested');
    }
    secondLi.appendChild(secondSubUl);
    mainUl.appendChild(secondLi);

    const secondCheckboxes = document.querySelectorAll('input.secondSubOption');
    const secondCheckall = document.getElementById('secondOption');
        secondCheckall.onclick = function() {
        for (let i = 0; i < secondCheckboxes.length; i++) {
            secondCheckboxes[i].checked = this.checked;
        }
    };

    function secondMyfunction(checkBox) {
        const secondCheckedCount = document.querySelectorAll('input.secondSubOption:checked').length;
        secondCheckall.checked = secondCheckedCount > 0;
        secondCheckall.indeterminate = secondCheckedCount > 0 && secondCheckedCount < secondCheckboxes.length;
    }

    const secondToggler = document.getElementsByClassName('caret');
    for (let i = 0; i < secondToggler.length; i++) {
        secondToggler[i].addEventListener('click', function() {
            this.parentElement.querySelector('.nested').classList.toggle('active');
            this.classList.toggle('caret-down');
        });
    }

然后我在 CSS 代码中写了这个：

body {
    color: #555;
    font-size: 1.25em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  hr {
    margin: 50px 0;
  }

  .ulClassStyle
  {
      list-style: none;
  }

  .container {
    margin: 40px auto;
    max-width: 700px;
  }

  .liClassStyle {
    margin-top: 1em;
  }

  .labelClassStyle {
    font-weight: bold;
  }
  .nested {
    display: none;
  }

  .caret {
    cursor: pointer;
    user-select: none;
  }

  .caret::before {
    content: "B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }

  .caret-down::before {
    transform: rotate(90deg);  
  }

  .active {
    display: block;
  }

如果我将这个 CSS 代码放在主 css 文件中：style.css，它可以正常工作，没有任何问题。但是，如果我为组件输入 CSS 它不起作用。知道为什么会这样吗？！

Answer 1

在 style.css 无法像这样工作的组件中将封装设置为 None >

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Answer 2

Angular 以它假设的方式工作，如果您在 component.css 中的书写样式将仅应用于该特定组件。style.css 包含全局样式，因此它们将在整个应用程序中得到应用你有两个选项可以让你在此处设置全局样式，一个可以是 encapsulation: ViewEncapsulation.None 但这将使该组件中的所有样式成为全局样式并将影响其他组件以及其他使用仅特定样式 eg

 ::ng-deep .liClassStyle {
    margin-top: 1em;
  }

因此您应该在 style.css 中使用应用于 body 等的样式，在 component.css

中使用与组件相关的样式

Answer 3

我发现出现这个问题是因为我在运行时动态添加了这些元素。所以，一般都要加上style.css或者写成：

encapsulation: ViewEncapsulation.None

这将与 css 通用

相同

感谢指导。

CSS 代码在组件 CSS 中不起作用，但在 style.css 和 Angular 中起作用

CSS codes does not work in component CSS but works in style.css in Angular

css

angular-components

angular