Question

我找到了两个选择器

import { Component, ViewChild,Output, EventEmitter, ElementRef , OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  childComponent: any;

  ngOnInit(){
  }

  outputEvent(event){
    console.log(event)
    this.childComponent = event
  }
}  console.log(event)
    this.childComponent = event
  }
}

和

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello My Parent Is {{parent}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() parent : any;
  @Output() output = new  EventEmitter<any>()

  ngOnInit(){
    console.log("Input:" + this.parent)
    this.output.emit('childComponent');
  }

}

这两个CSS选择器之间的确切区别是什么？

Answer 1

第一个是“后代”选择器：p内部div

div p {
  color: red;
}

<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>

第二个是“子”选择器：p下方的div

div > p {
  color: red;
}

<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>

Answer 2

div p这种样式将选择div下的所有p元素，无论p是否在另一个div内。 div>p仅选择div下的p。如果在同一个div中还有另一个具有p元素的div，则不会选择该p。

这些选择器有什么区别？

2 个答案: