搜尋

首頁  >  問答  >  主體

前端 - 谁来解释下这两个 CSS selector 区别

错误代码:

input {
  padding: 4px 0;
  // https://css-tricks.com/almanac/selectors/p/placeholder-shown/
  &:focus:not(:placeholder-shown) + .input__clear, &.input--filled:focus + .input__clear {
    opacity: 1;
  }
}

正确代码:

input {
  padding: 4px 0;
  // https://css-tricks.com/almanac/selectors/p/placeholder-shown/
  &:focus:not(:placeholder-shown) + .input__clear {
    opacity: 1;
  }
  /* !!! 不能和上面的合并成一行,会导致下面的选择器无法匹配 */
  &.input--filled:focus + .input__clear {
    opacity: 1;
  }
}

demo 见
https://jsfiddle.net/mLz7rajf/3/
https://jsfiddle.net/mLz7rajf/5/
正确情况应该是在不支持:placeholder-shown的浏览器(比如Firefox, 或者将placeholder-shown,随便改成一个无法识别的伪类),输入内容后显示 Clear

PHP中文网PHP中文网2863 天前472

全部回覆(1)我來回復

  • PHP中文网

    PHP中文网2017-04-17 11:54:55

    看起來像是瀏覽器bug

    回覆
    0
  • 取消回覆