选择器 2

::before / ::after

https://juejin.cn/post/6992961262560739364

<div class="wrapper">啊</div>

<style scoped>
.wrapper::before,
.wrapper::after {
  content: "⭐️";
}
</style>

啊

after 的本质是

<div>啊 ⭐️</div>

content

content:"" 是必须的，哪怕什么文本内容都没有。

content 默认显示为 display-inline

content 处理文本还支持，url、counters 、 quotes 、linear-gradient

https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

todo

::first-letter
::first-line
::marker

::selection

文本选中的 style

.wrapper ::selection {
  color: white;
  background-color: rgb(253, 136, 195);
}

:enabled / :disabled

<div class="wrapper">
  <input type="text" placeholder="可用输入框" /> <br />
  <input type="text" placeholder="禁用输入框" disabled="disabled" />
</div>

<style scoped>
  input[type="text"]:enabled {
    border: 1px solid #ccc;
  }

  input[type="text"]:disabled {
    background-color: #ccc;
    border: 1px solid #ccc;
  }
</style>

:checked

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked

mdn demo 很好

白日依山尽，

黄河入海流。

欲穷千里目，

更上一层楼。

需要注意的是，.wrapper 和 ::selection 之间有空格

:read-only

对应 from 的 readonly="readonly"，如

<input type="text" placeholder="地址" readonly="readonly" />

:read-write

非只读状态

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write

---