Question

我正在尝试使用一个小的伪元素来突出显示所需的输入。

store.map(state => state.entities).distinctUntilChanged().withLatestFrom(
  store.map(state => state.ids).distinctUntilChanged(), (entities, ids) => ids.map(id => entities[id])
).subscribe(console.log);


// Add    
store.next({
  ids: [1],
  entities: {
    1: {
      id: 1,
      name: 'A'
    }
  }
});

// Update

store.next({
  ...store.getValue(),
    entities: {
      1: {
        name: 'B'
      }
    }
});

// Delete
store.next({
  ids: store.getValue().ids.filter(id => id !== 1),
  entities: {}
});

上面的css不起作用，因为输入不能有伪元素。我必须将伪元素放在包装器上。

input:required::before {
  content: "\2022";
  font-size: 32px;
  position: absolute;
  color: orange;
  top: -16px;
  left: -4px;
}

但是伪类：required是无法访问的。无论如何，它们的伪类与纯css在输入上实现伪元素？即如何通过该元素伪类在非容器标签上最好地创建伪元素？

Answer 1

您可以将输入包装在label中，然后使用::after。

像这样：

.required {
  display: flex;
}

.required::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: red;
}

<label class="required">Label text
  <input required type="text"/>
</label>

在css中访问子伪类

1 个答案: