Question

我正在尝试直接在其private BooleanBinding done ; public void doIt(ActionEvent event){ Button doitButton = ((Button) event.getSource() ); doitButton.setDisable( true ); ExecutorService es = Executors.newFixedThreadPool(2); final ServiceExample service1 = new ServiceExample(4000); final ServiceExample service2 = new ServiceExample(5000); service1.setExecutor( es ); service2.setExecutor( es ); done = service1.stateProperty().isEqualTo(Worker.State.SUCCEEDED) .and(service2.stateProperty().isEqualTo(Worker.State.SUCCEEDED)); done.addListener((obs, wasDone, isNowDone) -> { if (isNowDone.booleanValue()) { lbl_Status.setText( "thread1Result: " + service1.getValue() + "thread2Result: " + service2.getValue() ); doitButton.setDisable(false); } }); service1.start(); service2.start(); }父级中定位.row的第一个实例。我无法让.page-container选择器正确定位:first-of-type的第一个实例。

.row

.page-container > .row:first-of-type {
  background: blue;
}

请帮助我定位<div class="page-container"> <div class="row">Target This Row</div> <div class="row">Don't Target</div> <div class="row">Don't Target <div class="row">Don't Target</div> </div> </div>的{{1}}的第一个实例{/ 1}}。

Answer 1

我最近遇到过这个问题。

问题在于:first-of-type具体是指第一个这种类型的元素 ，它不能（也没有）适用于类

为了拥有适用于类的选择器，我们需要:first-of-class或:first-of-query（可以选择任何 - 包括类） - 以及到目前为止，都不存在。

因此你需要这样的东西：

.page-container div:first-of-type.row

表示：

第一个div嵌套在.page-container内 - 但仅如果它也恰好有班级.row。

Answer 2

我认为你想要的是

.page-container > .row:first-child {
    background: blue;
}

Answer 3

我通常会忽略所有类或ID，并专注于标记名称，如果它过于宽泛，我会通过向父级添加类或ID来缩小它。

＆＃13;

div > div:first-of-type {
  background: blue;
}
div.page-container > div:first-of-type {
  border: 3px solid red;
}
p:first-of-type {
  color: blue
}
p:last-of-type {
  color: red;
}

＆＃13;

<p>Example #1 in blue background</p>
<p>Example #2 in red border</p>
<div class="page-container">
  <div class="row">Target This Row</div>
  <div class="row">Don't Target</div>
  <div class="row">Don't Target
    <div class="row">Don't Target</div>
  </div>
</div>

＆＃13;

不能将第一个类型的选择器与子选择器一起使用

3 个答案: